A fully-featured React DataTable component with sorting, filtering, pagination and more
npm install @cipherbaba/react-datatablebash
npm install @cipherbaba/react-datatable
or
yarn add @cipherbaba/react-datatable
`
Usage
`jsx
import React from 'react';
import { DataTable } from '@cipherbaba/react-datatable';
const App = () => {
// Sample data
const data = [
{ id: 1, name: 'John Doe', age: 25, status: 'Active' },
{ id: 2, name: 'Jane Smith', age: 32, status: 'Inactive' },
// ...more data
];
// Define columns
const columns = [
{ key: 'id', label: 'ID', sortable: true },
{ key: 'name', label: 'Name', sortable: true },
{ key: 'age', label: 'Age', sortable: true },
{
key: 'status',
label: 'Status',
sortable: true,
renderCell: (row) => (
{row.status}
)
}
];
return (
data={data}
columns={columns}
title="Users"
pagination={true}
selection={true}
search={true}
exportable={true}
onRowClick={(row) => console.log('Row clicked:', row)}
onSelectionChange={(selectedIds) => console.log('Selected IDs:', selectedIds)}
/>
);
};
export default App;
`
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | [] | Data to display in the table |
| columns | Array | [] | Column definitions |
| loading | Boolean | false | Shows loading spinner when true |
| title | String | undefined | Table title |
| pagination | Boolean | true | Enable/disable pagination |
| selection | Boolean | true | Enable/disable row selection |
| search | Boolean | true | Enable/disable search functionality |
| exportable | Boolean | true | Enable/disable CSV export |
| onRowClick | Function | undefined | Callback when a row is clicked |
| onSelectionChange | Function | undefined | Callback when selection changes |
| rowIdField | String | 'id' | Field to use as unique row identifier |
| defaultPageSize | Number | 10 | Default number of rows per page |
| pageSizeOptions | Array | [5, 10, 25, 50, 100] | Page size options |
| className | String | '' | Additional CSS class for the table container |
Styling
This component uses Tailwind CSS for styling. You have two options:
1. Use with Tailwind CSS (recommended):
- Make sure you have Tailwind CSS installed in your project
- The component will automatically use your Tailwind configuration
2. Use without Tailwind CSS:
- Import the default styles:
`jsx
import '@cipherbaba/react-datatable/dist/styles.css';
``