@stackline/react-data-table-component

A maintained React 19 data table component with sorting, selection, expandable rows, pagination, theming, and versioned live demos for each maintained React release line.

Documentation & Live Demos | npm | Issues | Repository

Latest version: 9.1.1

Why this library?

@stackline/react-data-table-component keeps the familiar API of the original data table library while standardizing package metadata, release stewardship, and versioned documentation under the maintained Stackline repository.

The component stays intentionally declarative:

• define your columns
• pass a data array
• turn features on with props such as pagination, selectableRows, and expandableRows
• customize behavior with callbacks, themes, and custom cells when you need deeper control

React Version Compatibility

Each package family only installs on its matching React family. Framework major and package major are not always the same package number, so use the package family column below.

Package family	Framework family	Peer range	Tested release window	Demo link
9.x	React 19 only	>=19.0.0 <20.0.0	19.0.0 -> 19.2.5	React 19 family docs
8.x	React 18 only	>=18.0.0 <19.0.0	18.0.0 -> 18.3.1	React 18 family docs

Installation

npm install @stackline/react-data-table-component styled-components

Choose the package family from the compatibility table above. Each published family is locked to one framework major only.

Basic Usage

import DataTable, { type TableColumn } from '@stackline/react-data-table-component';

type Movie = {
  id: number;
  title: string;
  year: number;
};

const columns: TableColumn<Movie>[] = [
  {
    name: 'Title',
    selector: row => row.title,
    sortable: true
  },
  {
    name: 'Year',
    selector: row => row.year,
    sortable: true,
    right: true
  }
];

const data: Movie[] = [
  { id: 1, title: 'Beetlejuice', year: 1988 },
  { id: 2, title: 'Ghostbusters', year: 1984 }
];

export function MovieTable() {
  return (
    <DataTable
      columns={columns}
      data={data}
      pagination
      highlightOnHover
    />
  );
}

Common Features

Selectable rows

<DataTable
  columns={columns}
  data={data}
  selectableRows
  selectableRowsHighlight
  onSelectedRowsChange={state => {
    console.log(state.selectedRows);
  }}
/>

Expandable rows

const ExpandedRow = ({ data }: { data: Movie }) => (
  <div style={{ padding: 16 }}>
    <strong>{data.title}</strong>
    <div>Released: {data.year}</div>
  </div>
);

<DataTable
  columns={columns}
  data={data}
  expandableRows
  expandableRowsComponent={ExpandedRow}
/>

Remote pagination

const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);

<DataTable
  columns={columns}
  data={visibleRows}
  pagination
  paginationServer
  paginationTotalRows={allRows.length}
  onChangePage={nextPage => setPage(nextPage)}
  onChangeRowsPerPage={(nextRowsPerPage, nextPage) => {
    setPerPage(nextRowsPerPage);
    setPage(nextPage);
  }}
/>

Custom themes

import DataTable, { createTheme } from '@stackline/react-data-table-component';

createTheme(
  'modernize-slate',
  {
    text: {
      primary: '#f7fbff',
      secondary: '#9fb9d6'
    },
    background: {
      default: '#102033'
    },
    context: {
      background: '#1f5ba7',
      text: '#ffffff'
    },
    divider: {
      default: '#294563'
    }
  },
  'dark'
);

Core API

Prop	Type	Notes
columns	TableColumn<T>[]	Required. Defines headers, selectors, cells, and sorting.
data	T[]	Required. Array of rows to render.
keyField	string	Defaults to id. Used for row identity and selection.
pagination	boolean	Enables built-in client pagination.
paginationServer	boolean	Lets you drive page state externally for remote data.
selectableRows	boolean	Enables row checkboxes.
selectableRowsSingle	boolean	Restricts selection to one row.
expandableRows	boolean	Enables expandable row content.
expandableRowsComponent	ComponentType	Custom renderer for expanded row content.
conditionalRowStyles	ConditionalStyles<T>[]	Applies style rules based on row values.
theme	Themes	Built-in theme name such as default or dark.
customStyles	TableStyles	CSS-in-JS overrides for table internals.
subHeader	boolean	Enables a header area above the table body.
subHeaderComponent	ReactNode	Custom controls such as filters or action buttons.
onSort	(column, direction, rows) => void	Fires when sorting changes.
onSelectedRowsChange	(state) => void	Fires when row selection changes.
onRowExpandToggled	(expanded, row) => void	Fires when an expandable row opens or closes.
onChangePage	(page, totalRows) => void	Fires on pagination page changes.
onChangeRowsPerPage	(rowsPerPage, page) => void	Fires when page size changes.

Versioned Docs

This repository now follows the versioned documentation pattern used across maintained Stackline component projects:

• source docs apps live in docs-src/react-18 and docs-src/react-19
• compiled static builds live in docs/react-18 and docs/react-19
• docs/index.html redirects to the latest maintained React line

That keeps GitHub Pages, npm metadata, and historical release lines aligned.

Run Locally

npm install
npm run build

npm run docs:install:react-18
npm run build:docs:react-18

npm run docs:install:react-19
npm run build:docs:react-19

If you still want the legacy authoring environment for story development, Storybook remains available locally:

npm run storybook

Changelog

See CHANGELOG.md.

Credits

• Original project: John Betancur
• Maintained by: Alexandro Paixao Marques