react-flexi-datatable

v1.0.5

Published

a month ago

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

0High
0Medium
0Low

shubh17

react table datatable flexi-table grid drag-and-drop bulk-edit tailwindcss

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: "[email protected]", role: "Admin", status: "Active" },
    { id: 2, name: "Priya Singh", email: "[email protected]", role: "Editor", status: "Active" },
    { id: 3, name: "Rahul Verma", email: "[email protected]", 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.

🎨 Theme & Layout Configuration Scenarios

The table supports flexible configurations for dimensions (tableWidth, tableHeight), scrolling (tabledatavertivallscroll, tabledatahorizontalscroll), themes (theme, headerTheme, footerTheme), top pagination (topPagination), and component controls (searchable, checkbox, columnwidth).

🛠️ Complete Configuration Reference Table

🔹 General & Theme Properties

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | "" | Table title text in top toolbar | | theme | string / Object | "default" | Preset ("default", "dark", "indigo", "emerald", "slate", "blue") or custom { header, footer, toolbar } | | headerTheme | string | undefined | Custom Tailwind classes for table header <thead> | | footerTheme | string | undefined | Custom Tailwind classes for footer pagination bar | | toolbarTheme | string | undefined | Custom Tailwind classes for top toolbar container |

🔹 Layout Dimensions & Scrolling

🔹 Search, Filtering & Sorting

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | searchable | boolean | true | Show / hide global search input box | | filterable | boolean | true | Show / hide Filter button menu | | filters | Array | undefined | Filter array ([{ key, label, type, options }]). If commented out/undefined, Filter button is hidden | | sortable | boolean | true | Enable / disable column header sorting |

🔹 Pagination Controls

🔹 Selection, Bulk Actions & Export

🔹 Column Drag, Order & Resizing

🔹 Column Definition Schema (`columns[]`)

🔹 Actions Column (`actions`)

📋 4 Configuration Scenario Examples

1️⃣ Scenario 1: Fixed Height with Vertical Scroll & Sticky Header (Recommended for 10/20 Page Sizes)

Use this when you want a fixed container height (e.g. 350px). When increasing page size, the table header stays pinned at the top while data rows scroll vertically inside.

const config = {
  title: "Users",
  theme: "default",
  tableWidth: "100%",
  tableHeight: "350px",            // Fixed viewport height
  tabledatavertivallscroll: true,  // Vertical scroll inside 350px
  tabledatahorizontalscroll: true, // Horizontal scroll
  pageSize: 5,
  pageSizeOptions: [5, 10, 20],
  // ...
};

2️⃣ Scenario 2: Auto Height (Table Expands Naturally with Data)

Use this when you want the table height to grow dynamically with the number of rows (no vertical scrollbar inside card).

const config = {
  title: "Users",
  theme: "default",
  tableWidth: "100%",
  tableHeight: "auto",               // Grows automatically with rows
  tabledatavertivallscroll: false,   // Disables inner vertical scroll
  tabledatahorizontalscroll: true,
  pageSize: 5,
  pageSizeOptions: [5, 10, 20],
  // ...
};

3️⃣ Scenario 3: Fixed Width & Fixed Height Container

Use this when you want to restrict both width and height (e.g. 800px width and 300px height).

const config = {
  title: "Users",
  theme: "indigo",                 // Preset theme
  tableWidth: "800px",             // Fixed width
  tableHeight: "300px",            // Fixed height
  tabledatavertivallscroll: true,  // Vertical scroll inside 300px
  tabledatahorizontalscroll: true, // Horizontal scroll inside 800px
  pageSize: 5,
  pageSizeOptions: [5, 10, 20],
  // ...
};

4️⃣ Scenario 4: Dark Mode / Custom Theme with Top & Bottom Pagination

Use this for dark mode styling with dual top and bottom pagination controls.

const config = {
  title: "Users",
  theme: "dark",                   // Dark mode preset
  topPagination: true,             // Enable both top & bottom pagination
  tableWidth: "100%",
  tableHeight: "350px",
  tabledatavertivallscroll: true,
  tabledatahorizontalscroll: true,
  pageSize: 5,
  pageSizeOptions: [5, 10, 20],
  // ...
};

Install the package:

npm install react-flexi-datatable