Data Table

A powerful and flexible component for displaying and managing tabular data, offering features such as sorting, filtering, pagination, and customizable columns to efficiently present large datasets in a user-friendly format.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import DataTable from '@start-base/start-ui/DataTable';

Usages

DataTable with Pagination

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]

DataTable with Border

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

DataTable Without Border

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

Virtual Table

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

DataTable With Custom Empty Text

Name	Age	Email
Nothing to show here.

Row Selection with a Custom Action

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

Row Selection with Checkboxes

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

DataTable with Title

User Information

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

DataTable With Filter

Filtering Enabled Table

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

DataTable With Sorting

Name	Age	Email
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]
John Doe	28	[email protected]
Jane Smith	34	[email protected]
Alice Johnson	45	[email protected]
Bob Brown	52	[email protected]
Clara Davis	24	[email protected]
Daniel Green	38	[email protected]

API

Name	Type	Default	Description
data	`array`		Data to be displayed in the table
columns	`array`		Columns configuration of the table
rowsPerPage	`number`	`5`	Number of rows per page when pagination is enabled
pagination	`boolean`	`false`	Whether to enable pagination
rowsPerPageOptions	`array`	`[5, 10, 20]`	Options for rows per page in pagination
border	`boolean`	`true`	Whether to show border around the table and its rows
rowSelect	`boolean`	`false`	Whether to enable row selection
rowSelectAction	`(selectedRows: (string \| number)[]) => void`		Callback function when rows are selected
checkboxAvailable	`boolean`	`false`	Whether to enable checkbox selection of rows
title	`string` \| `ReactNode`		Title of the table
filter	`boolean`	`false`	Whether to enable filtering functionality
sorting	`boolean`	`false`	Whether to enable sorting functionality
virtualized	`boolean`	`false`	Whether to enable virtual scrolling for large datasets
emptyText	`string`		Text displayed when there's no data
rowClassName	`string`		Class name applied to table rows
maxHeight	`number`	`340`	Maximum height of the table

Chip Divider