React DataTable

A fully-featured React DataTable component with sorting, filtering, pagination and more.

Features

- 📊 Sorting by any column
- 🔍 Search/filter functionality
- 📄 Pagination with customizable page sizes
- ✅ Row selection
- 🔧 Column visibility toggle
- 📁 CSV export
- 🎨 Fully customizable styling
- 🔢 Custom cell rendering
- 📱 Responsive design

Installation

``bash
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';
``

You can override any of the default styles by targeting the CSS classes in your own stylesheets.

License

MIT