A Table component is a structured UI element that organizes and displays data in rows and columns, making it easy to read and compare information. Tables can include features like sorting, filtering, pagination, and inline editing, allowing users to interact with the data efficiently. They are commonly used to present datasets, such as user information, product listings, or any structured content that benefits from a grid-like layout.

# Demo

Invoice table
Invoice	Status	Method	Amount	Custom
10001	Completed	Credit Card	$1000	Oops
10002	In progress	Net Banking	$500	Oops

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
captionClassName	string	' '	You can customise by passing tailwind classes.
headerClassName	string	' '	You can customise by passing tailwind classes.
headerRowClassName	string	' '	You can customise by passing tailwind classes.
headerCellClassName	string	' '	You can customise by passing tailwind classes.
bodyClassName	string	' '	You can customise by passing tailwind classes.
bodyRowClassName	string	' '	You can customise by passing tailwind classes.
bodyCellClassName	string	' '	You can customise by passing tailwind classes.
caption	string	' '	You can pass caption to table.
columnDef	ColumnDef[]	Required	You can pass column definition to table.
data	Object[]	Required	You can pass data to table.

# Usage

import { NTable } from 'nayan';

const CustomComponent = ({row, col, ...remaining}: any) => {
  return <div className="text-primary">Oops</div>;
};

const Table = () => {
  const columnDef = [
    { name: 'invoice', title: 'Invoice', className: 'w-[100px]' },
    { name: 'status', title: 'Status' },
    { name: 'method', title: 'Method' },
    { name: 'amount', title: 'Amount', className: 'text-right' },
    { name: 'custom', title: 'Custom', className: 'text-right', component: CustomComponent }
  ];

  const data = [
    { invoice: '10001', status: 'Completed', method: 'Credit Card', amount: '$1000' },
    { invoice: '10002', status: 'In progress', method: 'Net Banking', amount: '$500' }
  ];

  return <NTable className="bg-card" caption="Invoice table" columnDef={columnDef} data={data} />;
};

export default Table;