API reference

import { type ColumnGroup } from 'react-data-table-component';

const columnGroups: ColumnGroup[] = [
  { name: 'Employee', columnIds: ['first', 'last', 'dept'] },
  { name: 'Compensation', columnIds: ['base', 'bonus'], align: 'left' },
];

import { type TableColumn } from 'react-data-table-component';

const columns: TableColumn<MyRow>[] = [
  {
    id: 'name',
    name: 'Full name',
    selector: row => row.name,
    sortable: true,
    width: '200px',
  },
];

import { type CellEditor } from 'react-data-table-component';

type CellEditor<T = unknown> =
  | { type: 'text'; placeholder?: string }
  | { type: 'number'; placeholder?: string; min?: number; max?: number; step?: number }
  | { type: 'date'; min?: string; max?: string }
  | { type: 'checkbox' }
  | {
      type: 'select';
      options: Array<{ value: string; label: React.ReactNode }>;
      placeholder?: string;
    }
  | {
      type: 'custom';
      render: (ctx: CustomCellEditorContext<T>) => React.ReactNode;
    };

interface CustomCellEditorContext<T> {
  row: T;
  value: string;
  setValue: (next: string) => void;
  commit: (value?: string) => void;
  cancel: () => void;
  column: TableColumn<T>;
}

import { type ContextMenuAction } from 'react-data-table-component';

const rowActions = (row: MyRow): ContextMenuAction[] => [
  { id: 'edit', label: 'Edit' },
  { id: 'delete', label: 'Delete', disabled: row.locked },
];

import DataTable, { type DataTableHandle } from 'react-data-table-component';
import { useRef } from 'react';

function App() {
  const ref = useRef<DataTableHandle>(null);

  return (
    <>
      <button onClick={() => ref.current?.clearSelectedRows()}>Clear selection</button>
      <button onClick={() => ref.current?.clearSort()}>Reset sort</button>
      <DataTable ref={ref} columns={columns} data={data} selectableRows />
    </>
  );
}

import DataTable, { type TableStyles } from 'react-data-table-component';

const customStyles: TableStyles = {
  headRow: {
    style: {
      backgroundColor: '#f8fafc',
      borderBottomWidth: '2px',
    },
  },
  headCells: {
    style: {
      fontSize: '13px',
      fontWeight: 700,
      color: '#374151',
    },
  },
  rows: {
    style: { minHeight: '56px' },
    highlightOnHoverStyle: {
      backgroundColor: '#f0f9ff',
      borderBottomColor: '#e0f2fe',
      outline: '1px solid #bae6fd',
    },
  },
};

const conditionalRowStyles = [
  {
    when: row => row.status === 'active',
    style: { backgroundColor: '#f0fdf4', color: '#166534' },
  },
  {
    when: row => row.salary > 100000,
    // style can also be a function:
    style: row => ({ fontWeight: row.salary > 150000 ? 700 : 400 }),
  },
  {
    when: row => row.flagged,
    classNames: ['flagged-row'],
  },
];

import { createTheme } from 'react-data-table-component';

createTheme(
  'brand', // name (pass to the theme prop)
  {
    text: { primary: '#1a1a2e', secondary: '#4a4a6a', disabled: 'rgba(26,26,46,.38)' },
    background: { default: '#f0f4ff' },
    divider: { default: '#dde3f0' },
    button: { default: '#6366f1', hover: '#4f46e5', focus: 'rgba(99,102,241,.25)', disabled: '#c7d2fe' },
    selected: { default: '#ede9fe', text: '#3730a3' },
    highlightOnHover: { default: '#e0e7ff', text: '#1a1a2e' },
    striped: { default: '#f5f3ff', text: '#1a1a2e' },
  },
  'default', // optional: inherit from this theme
);

import { Media, Direction, Alignment, SortOrder } from 'react-data-table-component';

import { useColumnVisibility, type TableColumn } from 'react-data-table-component';

const rawColumns: TableColumn<Row>[] = [
  { id: 'name', name: 'Name', selector: r => r.name },
  { id: 'dept', name: 'Department', selector: r => r.dept },
];

function App() {
  const { columns, visibility, toggle, setAll } = useColumnVisibility(rawColumns);

  return (
    <>
      {visibility.map(({ id, name, visible }) => (
        <label key={id}>
          <input type="checkbox" checked={visible} onChange={() => toggle(id)} />
          {name}
        </label>
      ))}
      <button onClick={() => setAll(true)}>Show all</button>
      <DataTable columns={columns} data={data} />
    </>
  );
}

import { useTableExport, type TableColumn } from 'react-data-table-component';

const columns: TableColumn<Row>[] = [
  { id: 'id', name: 'ID', selector: r => r.id },
  { id: 'name', name: 'Name', selector: r => r.name },
];

function App({ rows }: { rows: Row[] }) {
  const { download, copy, toCSV, toJSON } = useTableExport({ columns, rows });

  return (
    <>
      <button onClick={() => download('rows.csv')}>CSV</button>
      <button onClick={() => download('rows.json', 'json')}>JSON</button>
      <button onClick={() => copy()}>Copy CSV</button>
    </>
  );
}

// Default export
import DataTable from 'react-data-table-component';

// Named exports
import {
  createTheme,
  defaultThemes,
  Media,
  Direction,
  Alignment,
  SortOrder,
  // Default icon sets (useful when building custom pagination/expander UIs)
  DEFAULT_PAGINATION_ICONS,
  DEFAULT_EXPANDABLE_ICON,
  // Headless hooks
  useTableState,
  useColumns,
  useTableData,
  useColumnFilter,
  useColumnVisibility,
  useTableExport,
  // Filter utilities
  emptyFilterState,
  isFilterActive,
} from 'react-data-table-component';

// TypeScript types
import type {
  TableProps,
  TableColumn,
  ColumnGroup,
  TableRow,
  TableStyles,
  Theme,
  ThemeProp,
  ConditionalStyles,
  DataTableHandle,
  ExpanderComponentProps,
  PaginationComponentProps,
  PaginationOptions,
  PaginationServerOptions,
  PaginationIcons,
  SortFunction,
  Selector,
  // Column visibility hook types
  UseColumnVisibilityResult,
  ColumnVisibilityEntry,
  // Filter types
  FilterType,
  FilterOperator,
  FilterCondition,
  FilterState,
} from 'react-data-table-component';