react-data-table

A powerful, high-performance React data table component built on TanStack Table v8 and Tailwind CSS. Designed for professionals who need a production-ready, beautiful, and feature-rich table with minimal configuration.

🚀 Key Features

• Extreme Performance: Leverages TanStack Table's core logic for efficient rendering.
• Modern UI: Polished, responsive design with Tailwind CSS.
• Decoupled Pagination: Simple state interface that doesn't leak internal table logic.
• Smart Toolbar: Built-in density controls, column filtering/visibility, and export actions.
• Fully Extensible: Custom row actions, expandable content, and flexible column definitions.
• Type Safe: Written 100% in TypeScript.

📦 Installation

npm install react-data-table

Peer Dependencies

To keep the bundle size small, this library requires the following peer dependencies:

npm install @tanstack/react-table lucide-react tailwind-merge clsx

🛠 Basic Concepts

1. Data (data)

An array of objects representing your rows.

[!TIP] Ensure your data objects have unique identifiers if you plan to use selection or expansion features.

2. Columns (columns)

Uses the standard TanStack Table ColumnDef format. This allows you to define headers, cell rendering logic, and accessor keys.

const columns = [
  {
    accessorKey: 'name',
    header: 'Full Name',
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ getValue }) => (
      <span className="capitalize">{getValue()}</span>
    ),
  },
];

💎 Core Components & Features

📄 Pagination

Our pagination is decoupled. You can either let the table handle it automatically (client-side) or provide manual props for server-side pagination.

Simple Pagination Props:

• pageCount: Total number of pages (required for manual mode).
• pagination: Current { pageIndex, pageSize } state.
• onPaginationChange: Callback when page or size changes.

🔍 Search & Filtering

The table includes a global search bar in the toolbar.

• Use onGlobalFilterChange to capture search queries.
• Set manualFiltering: true if you want to handle search on your backend.

🛠 Toolbar Actions

The toolbar exposes several high-level handlers:

• isAdd: Renders an "Add" button.
• excelExport: Parameter-less function for CSV/Excel generation.
• pdfExport: Parameter-less function for PDF generation.
• Density Toggle: Users can switch between Condensed, Normal, and Spacious views.

↔ Row Expansion

Enable expansion by providing getRowCanExpand. When a row is clicked, it expands to show additional details.

<Table
  getRowCanExpand={() => true}
  renderRowDetails={({ row }) => (
    <div className="p-4 bg-slate-50">
      Additional info for {row.original.name}
    </div>
  )}
/>

⚡ Row Actions

Easily add View, Edit, and Delete actions to every row:

<Table
  isView={(row) => handleView(row.original)}
  isEdit={(row) => handleEdit(row.original)}
  isDelete={(row) => handleDelete(row.original)}
/>

🎨 Styling with Tailwind

This library uses Tailwind CSS classes. To ensure the styles render correctly:

1. Import the CSS: Add this to your index.tsx or App.tsx:

   import 'react-data-table/dist/react-data-table.css';

2. Tailwind Config (Optional): Ensure your tailwind.config.js scans the library components if you want to customize themes:

   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/react-data-table/dist/*.js",
   ],

📖 Component API Reference

| Prop | Type | Description | | :--- | :--- | :--- | | data | TData[] | The array of objects to display. | | columns | ColumnDef<TData>[] | Column definitions. | | isLoading | boolean | Shows a skeleton loader when true. | | density | 'condensed' \| 'normal' \| 'spacious' | Initial row density. | | manualPagination | boolean | Enable if you are handling pagination on the server. | | excelExport | () => void | Optional function to trigger Excel export. | | pdfExport | () => void | Optional function to trigger PDF export. |

📜 License

MIT © [Your Name]