@giosg/data-table

Reusable React data table with sortable/draggable/resizable columns, row selection, and filters.

Features

• Generic API: DataTable<T> works with any row type.
• Column sorting.
• Drag-and-drop column reorder.
• Column resize.
• Text and numeric filters.
• Optional row selection.
• Infinite-scroll trigger callback (onScrollToBottom).

Install

npm install @giosg/data-table

Peer dependencies

• react: ^17.0.0 || ^18.0.0
• react-dom: ^17.0.0 || ^18.0.0
• @emotion/react
• @emotion/styled
• @dnd-kit/core
• @dnd-kit/sortable
• @dnd-kit/utilities
• @giosg/ui-components
• @giosg-design-system/icons

Usage

import { DataTable, type DataTableColumnConfig, type FontSize } from '@giosg/data-table';

type UserRow = {
  id: string;
  name: string;
  email: string;
  sessions: number;
};

const columns: DataTableColumnConfig[] = [
  { label: 'Name', filterKey: 'name', sortable: true },
  { label: 'Email', filterKey: 'email' },
  { label: 'Sessions', filterKey: 'sessions', sortable: true, alignRight: true },
];

const fontSize: FontSize = 'medium';

<DataTable<UserRow>
  columns={columns}
  data={rows}
  fontSize={fontSize}
  sortingColumn="name"
  sortingOrder="asc"
  currentColumnWidths={[220, 260, 120]}
  totalWidth={600}
  getRowId={(row) => row.id}
  renderCell={(row, column) => {
    switch (column.filterKey) {
      case 'name':
        return row.name;
      case 'email':
        return row.email;
      case 'sessions':
        return row.sessions;
      default:
        return null;
    }
  }}
  onSortChange={(column, order) => console.log(column, order)}
  onColumnResize={(column, width) => console.log(column, width)}
  onColumnReorder={(newColumns) => console.log(newColumns)}
/>

Build

From monorepo root:

npm run build build:data-table

Publish

cd packages/data-table
npm publish --access public