Columns
Columns are defined as an array of TableColumn<T> objects.
Each column controls its header label, data accessor, sort behaviour, rendering, and layout.
Column features
Toggle column visibility with omit, enable per-column filtering, and see custom cell renderers and conditional cell styles in action.
Columns:|Name column:
Name
Department
Salary
Status
Start date
Active
Active
Active
Contractor
Remote
Active
On Leave
Remote
import { useState } from 'react';
import DataTable, { type TableColumn, type ConditionalStyles } from 'react-data-table-component';
interface Employee {
id: number;
name: string;
department: string;
salary: number;
status: 'Active' | 'Remote' | 'Contractor' | 'On Leave';
startDate: string;
}
const StatusBadge = ({ status }: { status: Employee['status'] }) => (
<span style={{ padding: '2px 8px', borderRadius: 12, fontSize: 11, fontWeight: 600,
background: status === 'Active' ? '#dcfce7' : '#f3f4f6',
color: status === 'Active' ? '#15803d' : '#6b7280' }}>
{status}
</span>
);
export default function App() {
const [showDept, setShowDept] = useState(true);
const [showSalary, setShowSalary] = useState(true);
const [filterable, setFilterable] = useState(false);
const columns: TableColumn<Employee>[] = [
{
id: 'name', name: 'Name', selector: r => r.name,
sortable: true, filterable, // filterable toggles a filter input in the header
},
{
id: 'department', name: 'Department', selector: r => r.department,
sortable: true, omit: !showDept,
},
{
id: 'salary', name: 'Salary', selector: r => r.salary,
sortable: true, right: true,
format: r => `$${r.salary.toLocaleString()}`,
omit: !showSalary,
conditionalCellStyles: [
{ when: r => r.salary > 150000, style: { fontWeight: 700 } },
],
},
{
id: 'status', name: 'Status', selector: r => r.status,
center: true, cell: r => <StatusBadge status={r.status} />,
},
{
id: 'start', name: 'Start date', selector: r => r.startDate,
sortable: true,
format: r => new Date(r.startDate).toLocaleDateString(),
},
];
return (
<div>
<div>
<button onClick={() => setShowDept(p => !p)}>Toggle Department</button>
<button onClick={() => setShowSalary(p => !p)}>Toggle Salary</button>
<button onClick={() => setFilterable(p => !p)}>Toggle filterable</button>
</div>
<DataTable columns={columns} data={data} defaultSortFieldId="name" />
</div>
);
}Basic column definition
import { type TableColumn } from 'react-data-table-component';
interface Row {
id: number;
name: string;
salary: number;
}
const columns: TableColumn<Row>[] = [
{
name: 'Name',
selector: row => row.name,
sortable: true,
},
{
name: 'Salary',
selector: row => row.salary,
format: row => `$${row.salary.toLocaleString()}`,
right: true,
},
];Column properties
| Prop | Type | Description |
|---|---|---|
name | ReactNode | Header label |
selector | (row: T) => Primitive | Data accessor used for sorting and default display |
cell | (row, index, column, id) => ReactNode | Custom cell renderer. Overrides selector display |
format | (row, index) => ReactNode | Format the selector value without replacing the sort key |
sortable | boolean | Enable sorting on this column |
sortFunction | (a, b) => number | Custom comparator for this column |
sortField | string | Key to pass to onSort for server-side sorting |
filterable | boolean | Show a filter input in the column header |
filterFunction | (row, value) => boolean | Custom filter predicate (defaults to case-insensitive substring) |
id | string | number | Stable identity used by defaultSortFieldId and column groups |
width | string | Fixed width, e.g. "120px" |
minWidth | string | Minimum width |
maxWidth | string | Maximum width |
grow | number | Flex-grow factor (default 1) |
right | boolean | Right-align cell content |
center | boolean | Center cell content |
wrap | boolean | Allow text to wrap |
compact | boolean | Remove cell padding |
button | boolean | Center content and suppress row click propagation |
allowOverflow | boolean | Allow content to overflow the cell (for dropdowns/popovers) |
ignoreRowClick | boolean | Prevent cell clicks from triggering onRowClicked |
hide | number | "sm" | "md" | "lg" | Hide the column below this breakpoint |
omit | boolean | Exclude column entirely (useful for toggling visibility) |
reorder | boolean | Allow drag-to-reorder for this column |
style | CSSProperties | Inline styles applied to every cell in this column |
conditionalCellStyles | ConditionalStyles<T>[] | Per-cell conditional styles |
Custom cell renderer
{
name: 'Actions',
button: true,
cell: row => (
<button onClick={() => handleDelete(row.id)}>Delete</button>
),
}Column filtering
Add filterable: true to any column to render a filter icon in the header.
Clicking the icon opens a text input; rows are filtered client-side by default.
{ name: 'Name', selector: r => r.name, filterable: true }
// Custom filter logic:
{
name: 'Status',
selector: r => r.status,
filterable: true,
filterFunction: (row, value) => row.status.startsWith(value),
}For controlled filter state, pass filterValues and onFilterChange to DataTable.
Column reordering
Mark columns with reorder: true and pass onColumnOrderChange to
DataTable to enable drag-to-reorder handles. The callback receives the new column array
in order.
const [cols, setCols] = React.useState(columns);
<DataTable
columns={cols}
data={data}
onColumnOrderChange={setCols}
/>Hiding columns
Toggle a column's visibility by setting omit dynamically:
const [showSalary, setShowSalary] = React.useState(true);
const columns = [
{ name: 'Name', selector: r => r.name },
{ name: 'Salary', selector: r => r.salary, omit: !showSalary },
];