rs-data-grid-react

A configurable data grid component for React — filtering, sorting, pagination, inline/popup/batch editing, drag-and-drop rows/columns, and Excel/PDF export.

Install

npm install rs-data-grid-react

react and react-dom (^18.2.0) are peer dependencies — install them in your app if you haven't already.

Usage

import { RsDataGrid } from 'rs-data-grid-react';

export function App() {
  return (
    <RsDataGrid
      theme="light"
      fetchUrl="https://api.example.com/items"
      pagination={true}
      showFilter={true}
      showSort={true}
      showSearch={true}
      gridMode="popup"
    />
  );
}

No separate CSS import is needed — styles are bundled with the component.

Data

Provide data either by URL (fetchUrl, fetched with fetchMethod/fetchHeaders/authToken) or directly via dataSource. Columns are inferred from the data's own keys unless you pass an explicit columns array ({ dataField, caption }[]).

Key props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | theme | 'light' \| 'dark' | 'light' | Color theme | | fetchUrl / dataSource | string / any[] | — | Where the grid gets its rows | | columns | IColumn[] | inferred | Explicit column list | | gridMode | 'popup' \| 'row' \| 'batch' | 'popup' | Add/edit interaction style | | pagination | boolean | false | Enable paging | | showFilter / showSort / showSearch | boolean | false | Toolbar/header features | | dragDropRows / dragDropColumns | boolean | false | Enable drag-to-reorder | | exportExcel / exportPDF | boolean | false | Toolbar export buttons | | onRowAdd / onRowEdit / onRowDelete / onBatchSave | (row) => void | — | CRUD callbacks |

See RsDataGridProps in the shipped type declarations for the full list.

License

MIT