react-data-suite

A React + TypeScript component library for building flexible data-driven UIs.

The library provides independent, reusable building blocks for tables, filters, pagination, and column presets.

Components

| Component | Description | |---|---| | DataTable | A flexible data table built on top of @tanstack/react-table with sorting, actions, nested rows, truncation, indicators, and customizable rendering | | FilterPanel | A dynamic filter builder supporting text, date, static select, and async select fields | | Pagination | A simple pagination component supporting client-side and server-side pagination | | ColumnPresetManager | Column visibility and ordering management with create, update, delete, and drag-and-drop support |

Core Principles

No Business Logic

This library is UI-focused only.

• No API calls (fetch, axios, or services).
• No backend assumptions.
• No authentication or authorization logic.
• No predefined business rules.
• No forced translations.
• No required icon library.

All communication with external systems is done through callbacks.

Examples:

• onSearch
• loadOptions
• onCreate
• onUpdate
• onDelete
• onRowAction

Installation

Local Development

For local development you can install the package directly:

npm install /path/to/react-data-suite

Or use npm linking:

cd /path/to/react-data-suite
npm link

cd /path/to/your-project
npm link react-data-suite

Peer Dependencies

The library uses peer dependencies to avoid forcing specific versions into consuming applications.

Install the required dependencies according to the components you use:

npm install reactstrap @tanstack/react-table react-select react-select-async-paginate react-hook-form @hello-pangea/dnd

Not every dependency is required for every component.

For example:

• DataTable requires @tanstack/react-table.
• ColumnPresetManager requires @hello-pangea/dnd.
• FilterPanel async fields require react-select-async-paginate.

Modern bundlers will only include imported code.

Usage

DataTable

import {
  DataTable,
  type DataTableColumnConfig
} from "react-data-suite";

import { createColumnHelper } from "@tanstack/react-table";

interface User {
  id: number;
  name: string;
  email: string;
}

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor("name", {
    header: "Name",
  }),

  columnHelper.accessor("email", {
    header: "Email",
  }),
];

const columnConfig: DataTableColumnConfig[] = [
  {
    key: "name",
    sortable: true,
  },
];

<DataTable
  title="Users"
  columns={columns}
  data={users}
  columnConfig={columnConfig}
/>;

FilterPanel

import {
  FilterPanel,
  type FilterFieldConfig
} from "react-data-suite";

const fields: FilterFieldConfig[] = [
  {
    field: "name",
    label: "Name",
    operator: "like",
    type: "text",
  },

  {
    field: "status",
    label: "Status",
    operator: "eq",
    type: "static-select",
    options: [
      {
        value: "active",
        label: "Active",
      },
      {
        value: "inactive",
        label: "Inactive",
      },
    ],
  },
];

The component does not know how filtering works.

The parent component decides how to handle the selected filters.

Pagination

import { Pagination } from "react-data-suite";

<Pagination
  currentPage={page}
  lastPage={lastPage}
  total={total}
  perPage={perPage}
  onPageChange={setPage}
  onPerPageChange={setPerPage}
/>

ColumnPresetManager

import {
  ColumnPresetManager
} from "react-data-suite";

<ColumnPresetManager
  availableColumns={[
    {
      value: "name",
      label: "Name",
    },
    {
      value: "email",
      label: "Email",
    },
  ]}
  presets={presets}
  onActivate={applyPreset}
  onCreate={createPreset}
  onUpdate={updatePreset}
  onDelete={deletePreset}
/>

Combining Components

The components are completely independent.

You can combine them however your application requires:

<>
  <FilterPanel
    fields={fields}
    filters={filters}
    onChange={setFilters}
    onSearch={search}
  />

  <DataTable
    title="Results"
    columns={columns}
    data={data}
    columnConfig={columnConfig}
  />

  <Pagination
    currentPage={page}
    lastPage={lastPage}
    total={total}
    perPage={perPage}
    onPageChange={setPage}
  />
</>

Project Structure

src/
│
├── index.ts
│
├── types/
│   ├── common.ts
│   ├── table.ts
│   ├── filter.ts
│   └── preset.ts
│
├── utils/
│   └── htmlSanitizer.ts
│
└── components/
    ├── DataTable/
    ├── FilterPanel/
    ├── Pagination/
    ├── Modal/
    └── ColumnPresetManager/

Design Philosophy

Flexible by Default

The library provides UI primitives, not application architecture.

You decide:

• How data is loaded.
• How data is stored.
• How filters are processed.
• How presets are persisted.
• How permissions are handled.

Rendering Customization

The library does not enforce:

• Specific CSS frameworks.
• Specific icon packages.
• Specific backend implementations.

Components accept configuration and callbacks to integrate with any application.

Build

Install dependencies:

npm install

Run type checking:

npm run typecheck

Create production build:

npm run build

License

MIT