react-flexi-datatable

react-flexi-datatable

A feature-rich, interactive, highly configurable, and responsive React data table component built with Tailwind CSS and Lucide icons.

---

Installation

Install react-flexi-datatable in your React application:

# Using npm
npm install react-flexi-datatable

# OR using yarn
yarn add react-flexi-datatable

# OR using pnpm
pnpm add react-flexi-datatable

---

Quick Start & Usage

Import DataTable and the bundled CSS file in your React application:

import React, { useState } from "react";
import DataTable from "react-flexi-datatable";
import "react-flexi-datatable/dist/style.css"; // Import styles

const tableConfig = {
  title: "User Directory",
  searchable: true,        // Enable global search bar
  filterable: true,        // Enable dropdown filter menu
  sortable: true,          // Enable column header sorting
  pagination: true,        // Enable pagination footer
  columnVisibility: true,  // Enable column visibility toggle menu
  selectable: true,        // Enable row checkboxes
  keyboardNavigation: true,// Enable arrow key grid navigation
  exportable: true,        // Enable CSV export button
  bulkEditable: true,      // Enable bulk edit mode
  dropcolumn: true,        // Enable drag column header to hide dropzone
  columnordering: true,    // Enable drag & drop column reordering
  pageSize: 5,
  pageSizeOptions: [5, 10, 20],
  filters: [
    {
      key: "status",
      label: "Status",
      type: "select",
      options: [
        { label: "All", value: "all" },
        { label: "Active", value: "Active" },
        { label: "Inactive", value: "Inactive" }
      ]
    }
  ],
  columns: [
    { key: "name", label: "Name", visible: true, sortable: true, searchable: true, editable: true, width: 260 },
    { key: "email", label: "Email", visible: true, sortable: true, searchable: true, editable: true },
    { key: "role", label: "Role", visible: true, sortable: true, searchable: true, editable: true, type: "select", options: ["Admin", "Editor", "User"] },
    { key: "status", label: "Status", visible: true, sortable: true, searchable: true, editable: true, type: "select", options: ["Active", "Inactive"] }
  ],
  actions: { view: true, edit: true, delete: true }
};

export default function App() {
  const [data, setData] = useState([
    { id: 1, name: "Aarav Sharma", email: "aarav@example.com", role: "Admin", status: "Active" },
    { id: 2, name: "Priya Singh", email: "priya@example.com", role: "Editor", status: "Active" },
    { id: 3, name: "Rahul Verma", email: "rahul@example.com", role: "User", status: "Inactive" }
  ]);

  return (
    <main className="p-6 max-w-7xl mx-auto">
      <DataTable
        config={tableConfig}
        data={data}
        onView={(row) => alert(`Viewing: ${row.name}`)}
        onEdit={(updatedRow) => {
          setData((prev) => prev.map((item) => (item.id === updatedRow.id ? updatedRow : item)));
        }}
        onBulkEdit={(ids, changes) => console.log("Bulk updated IDs:", ids, changes)}
        onDelete={(deletedRow) => {
          setData((prev) => prev.filter((item) => item.id !== deletedRow.id));
        }}
      />
    </main>
  );
}

---

Complete Feature Breakdown

1. Drag & Drop Column Reordering (columnordering: true)

• Header Dragging: Click and drag column headers left or right to reorder columns.
• Menu Reordering: Drag columns inside the Columns dropdown menu to reorder.

2. Column Resizing (width: number)

• Resizer Handle: Hover over column borders and drag to resize column width.
• Double-Click Reset: Double-click resizer border to reset back to custom default width.

3. Drop Column to Hide (dropcolumn: true)

• Dropzone: Dragging a column header reveals a dropzone above the table. Drop to hide the column instantly.

4. Character Truncation & Hover Tooltip

• 25-Character Truncation: Text longer than 25 characters automatically truncates with ....
• Hover Full Text: Hovering over truncated text displays full text in a tooltip.

5. Bulk Editing Mode (bulkEditable: true)

• Multi-Row Selection: Select rows via checkboxes and choose specific columns to bulk update simultaneously.

6. Inline Row Editing

• In-Place Editing: Edit row data directly inside the table with input or select controls (Enter to save, Escape to cancel).

7. Column Visibility & LocalStorage Persistence

• Toggle column visibility on/off. Layout order, widths, and visibility automatically persist in localStorage.

8. Global Search, Filtering & Sorting

• Real-time multi-column search, dynamic select dropdown filters, and multi-state column header sorting.

9. Keyboard Grid Navigation (keyboardNavigation: true)

• Navigate cells with ↑ ↓ ← → arrow keys and activate controls with Enter / Space.

10. CSV Export (exportable: true)

• Export active filtered and sorted table data to CSV with a single click.

---

Install the package from NPM:

npm install react-flexi-datatable

Install the package from Yarn:

yarn add react-flexi-datatable

Install the package from pnpm:

pnpm add react-flexi-datatable