Table

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

Rendered live, with the same build of the library you install.

Name	Email	Role
Alice	alice@example.com	Admin
Bob	bob@example.com	User
Charlie	charlie@example.com	Editor

Usage

Source

Table.tsx

import { NTable } from '@nayan-ui/react';

const columns = [
  { name: 'name', title: 'Name' },
  { name: 'email', title: 'Email' },
  { name: 'role', title: 'Role' }
];

const data = [
  { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
  { name: 'Bob', email: 'bob@example.com', role: 'User' },
  { name: 'Charlie', email: 'charlie@example.com', role: 'Editor' }
];

const Table = () => {
  return (
    <div>
      <NTable columns={columns} data={data} />
    </div>
  );
};

export default Table;

Attributes

17 props

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	Optional	Caption for the table.
columns	NTableColumn<T>[]	Required	Array of table columns.
data	T[]	Required	Array of table data.
tableProps	React.TableHTMLAttributes<HTMLTableElement>	Optional	Props for table element.
rowProps	(row: T, rowIndex: number) => React.HTMLAttributes<HTMLTableRowElement>	Optional	Function to get row props.
cellProps	(row: T, col: NTableColumn<T>, rowIndex: number, colIndex: number) => React.TdHTMLAttributes<HTMLTableCellElement>	Optional	Function to get cell props.
variant	'primary' \| 'secondary'	'primary'	Visual variant of the table.
emptyMessage	React.ReactNode	Optional	Content shown when table has no data.
getRowKey	(row: T, index: number) => string \| number	Optional	Custom key extractor for table rows.

Table

Demo

Usage

Attributes

Tags