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

npm install @cipherbaba/react-datatable
# or
yarn add @cipherbaba/react-datatable

Usage

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) => (
        <span className={row.status === 'Active' ? 'text-green-500' : 'text-red-500'}>
          {row.status}
        </span>
      )
    }
  ];

  return (
    <DataTable
      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:

   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