react-flexi-table

A modern, lightweight React data table with sorting, global search, typed column filters, pagination, footer summaries, and support for both Tailwind CSS and Bootstrap.

Features

• Sorting — click any column header to sort asc / desc / clear
• Global search — instant full-table search across all columns
• Typed column filters — text, select, number, date, date range, boolean — opt-in per column
• Pagination — built-in page navigation with page-size selector
• Footer summaries — computed over all filtered rows (not just current page)
• Custom cell rendering — full control via col.render
• Per-column styles — align, width, minWidth, cellClassName, headerClassName
• Row details — optional full-width sub-row beneath each data row, driven by a data field or custom function
• Font size presets — sm, md, lg or fully custom { wrapper, header, body } values
• Dual framework — Tailwind CSS or Bootstrap out of the box

Installation

npm install @codefish24/react-flexi-table

Import the stylesheet once in your app entry:

import '@codefish24/react-flexi-table/dist/index.css';

Quick Start

import { AdvancedTable } from '@codefish24/react-flexi-table';
import '@codefish24/react-flexi-table/dist/index.css';

const columns = [
  { key: 'name',  title: 'Name',  sortable: true },
  { key: 'age',   title: 'Age',   sortable: true },
  { key: 'email', title: 'Email', sortable: true },
];

const data = [
  { id: 1, name: 'Alice',  age: 28, email: '[email protected]' },
  { id: 2, name: 'Bob',    age: 34, email: '[email protected]'   },
  { id: 3, name: 'Carol',  age: 22, email: '[email protected]' },
];

export default function App() {
  return <AdvancedTable data={data} columns={columns} />;
}

Props

<AdvancedTable />

| Prop | Type | Default | Description | |---|---|---|---| | data | array | [] | Row data | | columns | array | [] | Column definitions (see below) | | enableSorting | boolean | true | Sort on column header click | | enableFiltering | boolean | false | Show per-column filter inputs (opt-in per column via col.filterable) | | enableGlobalSearch | boolean | true | Show global search bar | | enablePagination | boolean | true | Show pagination bar | | defaultPageSize | number | 10 | Rows shown per page | | pageSizeOptions | number[] | [10, 25, 50, 100] | Page size dropdown options | | enableFooter | boolean | false | Show footer row (legacy — see footerSummaryConfig.enabled) | | footerSummaryConfig | object | { showColumnSummaries: true } | Footer options — enabled turns the footer on; it takes precedence over enableFooter, so you only need to set one | | uiFramework | string | 'tailwind' | 'tailwind' or 'bootstrap' | | fontFamily | string | 'font-inter' | CSS class applied to the container | | fontSize | string \| object | 'md' | Font size preset ('sm', 'md', 'lg') or custom object { wrapper, header, body } | | getRowKey | function | — | (row, index) => key — custom row key resolver | | globalSearchPlaceholder | string | 'Search...' | Placeholder for the search input | | showRowDetail | boolean | false | Show row detail below each data row | | rowDetailKey | string | 'detail' | Field name for row detail in row data | | getRowDetail | function | — | (row) => string\|ReactNode\|null — custom row detail renderer | | rowDetailClassName | string | — | Custom CSS class for row detail row | | enableRowSelection | boolean | false | Show a checkbox column for row selection | | selectedRowKeys | array | — | Controlled selected row keys (string\|number)[] | | onSelectionChange | function | — | (keys) => void — fired whenever the selection changes | | onSortChange | function | — | (key, direction \| null) => void — fired on sort toggle | | onFilterChange | function | — | (filters) => void — fired when a column filter changes | | onGlobalSearchChange | function | — | (term) => void — fired when the global search term changes | | onPageChange | function | — | (page) => void — fired on page change | | onPageSizeChange | function | — | (size) => void — fired when the page size changes |

Deprecated: showRowSubtitle, rowSubtitleKey, getRowSubtitle, and rowSubtitleClassName still work but will log a warning in development.

Column definition

| Property | Type | Default | Description | |---|---|---|---| | key | string | required | Maps to a field in your data object | | title | string | required | Column header label | | sortable | boolean | true | Allow sorting on this column | | filterable | boolean | false | Show a filter input (requires enableFiltering={true}) | | filterType | string | 'text' | Filter input type — see table below | | filterOptions | string[] | — | Options for 'select' filter type | | render | function | — | (value, row) => ReactNode — custom cell renderer | | footerSummary | function | — | (allFilteredRows) => ReactNode\|string — footer cell content | | align | string | — | 'left' | 'center' | 'right' | | width | number\|string | — | Fixed column width e.g. 120 or '10%' | | minWidth | number\|string | — | Minimum column width | | headerClassName | string | — | Extra CSS class on the <th> | | cellClassName | string | — | Extra CSS class on every <td> in this column | | headerCase | string | 'uppercase' | Header text transform: 'uppercase', 'lowercase', 'title', 'sentence', or 'none' |

Filter types (filterType)

| Value | UI rendered | Match behaviour | |---|---|---| | 'text' (default) | Text input | Case-insensitive substring match | | 'select' | Dropdown | Exact string match — provide filterOptions: [] | | 'number' | Number input | Exact numeric equality | | 'boolean' | Yes / No / All dropdown | Boolean / truthy equality | | 'date' | Date picker | Matches rows whose value starts with the selected date string | | 'daterange' | Two date pickers (From / To) | Inclusive date range |

Examples

Pagination

<AdvancedTable
  data={data}
  columns={columns}
  enablePagination={true}
  defaultPageSize={25}
  pageSizeOptions={[25, 50, 100]}
/>

Global search + column filters

const columns = [
  { key: 'name',  title: 'Name',  filterable: true },           // text (default)
  { key: 'email', title: 'Email', filterable: true },           // text (default)
  { key: 'age',   title: 'Age' },                               // no filter
];

<AdvancedTable
  data={data}
  columns={columns}
  enableGlobalSearch={true}
  enableFiltering={true}
/>

Typed column filters

const columns = [
  // Free-text search
  { key: 'name', title: 'Name', filterable: true, filterType: 'text' },

  // Dropdown — pick from a fixed list
  {
    key: 'department',
    title: 'Department',
    filterable: true,
    filterType: 'select',
    filterOptions: ['Engineering', 'Design', 'Marketing', 'Sales'],
  },

  // Numeric equality
  { key: 'age', title: 'Age', filterable: true, filterType: 'number' },

  // Yes / No toggle
  { key: 'active', title: 'Active', filterable: true, filterType: 'boolean' },

  // Single date picker
  { key: 'created', title: 'Created', filterable: true, filterType: 'date' },

  // From / To date range
  { key: 'joined', title: 'Joined', filterable: true, filterType: 'daterange' },
];

<AdvancedTable
  data={data}
  columns={columns}
  enableFiltering={true}
/>

Custom cell rendering

const columns = [
  {
    key: 'status',
    title: 'Status',
    render: (value) => (
      <span className={value === 'Active' ? 'badge-green' : 'badge-red'}>
        {value}
      </span>
    ),
  },
  {
    key: 'salary',
    title: 'Salary',
    align: 'right',
    render: (value) => `$${value.toLocaleString()}`,
  },
];

Header text case

Control the column header text transformation per column:

const columns = [
  { key: 'name', title: 'Name', headerCase: 'title' },        // "Name"
  { key: 'email', title: 'Email Address', headerCase: 'sentence' }, // "Email address"
  { key: 'status', title: 'Status', headerCase: 'none' },     // "Status" (as-is)
  { key: 'age', title: 'Age' },                               // "AGE" (default: uppercase)
];

Font size

Use a preset or customize font sizes for wrapper, header, and body cells:

// Preset sizes
<AdvancedTable data={data} columns={columns} fontSize="sm" />  // Small
<AdvancedTable data={data} columns={columns} fontSize="md" />  // Medium (default)
<AdvancedTable data={data} columns={columns} fontSize="lg" />  // Large

// Custom sizes
<AdvancedTable
  data={data}
  columns={columns}
  fontSize={{
    wrapper: '14px',   // Table wrapper base size
    header: '12px',    // Header cells
    body: '13px'       // Body cells
  }}
/>

Preset values:

| Preset | Wrapper | Header | Body | |--------|---------|--------|------| | sm | 13px | 11px | 12px | | md | 14px | 12px | 13px | | lg | 16px | 14px | 15px |

Footer summaries

Footer values are computed over all filtered rows, so totals/averages stay correct while paginating.

const columns = [
  {
    key: 'salary',
    title: 'Salary',
    footerSummary: (rows) =>
      `Total: $${rows.reduce((s, r) => s + r.salary, 0).toLocaleString()}`,
  },
  {
    key: 'age',
    title: 'Age',
    footerSummary: (rows) =>
      `Avg: ${Math.round(rows.reduce((s, r) => s + r.age, 0) / rows.length)}`,
  },
];

<AdvancedTable
  data={data}
  columns={columns}
  footerSummaryConfig={{ enabled: true, showColumnSummaries: true }}
/>

// Or with the legacy prop alone — both no longer need to be set together:
<AdvancedTable
  data={data}
  columns={columns}
  enableFooter={true}
/>

Bootstrap

<AdvancedTable data={data} columns={columns} uiFramework="bootstrap" />

Custom row key

<AdvancedTable data={data} columns={columns} getRowKey={(row) => row.uuid} />

Row detail

Display additional information below each row with a full-width detail row:

// Using default 'detail' field
const data = [
  { 
    id: 1, 
    name: 'Alice', 
    age: 28, 
    detail: 'Department: Engineering' 
  },
  { 
    id: 2, 
    name: 'Bob', 
    age: 34 
    // No detail for this row
  },
];

<AdvancedTable 
  data={data}
  columns={columns}
  showRowDetail={true}
/>

// Custom field name
<AdvancedTable 
  data={data}
  columns={columns}
  showRowDetail={true}
  rowDetailKey="notes"  // Use 'notes' field instead
/>

// Dynamic detail with function
<AdvancedTable 
  data={data}
  columns={columns}
  showRowDetail={true}
  getRowDetail={(row) => 
    row.priority === 'high' ? `⚠️ Priority: ${row.priority}` : null
  }
/>

// Custom styles
<AdvancedTable 
  data={data}
  columns={columns}
  showRowDetail={true}
  rowDetailClassName="bg-yellow-50 text-yellow-700 px-4 py-2"
/>

Behavior:

• showRowDetail={true} is required to enable all row detail rendering — both rowDetailKey and getRowDetail are no-ops without it
• Row details span the full width of the table (uses colSpan={columns.length})
• If getRowDetail returns null, no detail row is rendered for that row
• getRowDetail takes priority over rowDetailKey if both are provided
• The old props showRowSubtitle, rowSubtitleKey, getRowSubtitle, and rowSubtitleClassName are deprecated but still supported

Row selection

Enable a checkbox column and receive the selected row keys as they change. Selection keys are derived from getRowKey (or the row's id), so they stay stable across pages and re-sorts.

const [selected, setSelected] = useState([]);

<AdvancedTable
  data={data}
  columns={columns}
  enableRowSelection={true}
  onSelectionChange={(keys) => setSelected(keys)}
/>

• onSelectionChange receives (string | number)[] keys for all selected rows, across pages
• The header checkbox selects / deselects all rows on the current page
• Pass selectedRowKeys={[...]} to control the selection from outside (controlled mode)

Change callbacks (server-side data)

The table stays uncontrolled internally, but every state change is reported so you can fetch server-side and feed the result back through data:

const [rows, setRows] = useState([]);

<AdvancedTable
  data={rows}
  columns={columns}
  onSortChange={(key, direction) => fetchData({ sort: key, dir: direction })}
  onFilterChange={(filters) => fetchData({ filters })}
  onGlobalSearchChange={(term) => fetchData({ q: term })}
  onPageChange={(page) => fetchData({ page })}
  onPageSizeChange={(size) => fetchData({ page: 1, size })}
/>

function fetchData(params) {
  api.get('/users', { params }).then(({ data }) => setRows(data));
}

Local Development

# Clone and install
git clone https://github.com/codefish24/react-flexi-table.git
cd react-flexi-table
npm install

# Start the demo in the browser (hot-reload)
npm run dev

# Run the unit + component test suite
npm test

# Build the library
npm run build

License

MIT © codefish24