Column separators
Two props control vertical separators between columns: columnSeparator for body
row cells and headerSeparator for column header cells. Both accept the same values.
Column separators
Toggle separator modes independently for headers and body rows.
Body separators:Inset 60%-height
Header separators:Inset 60%-height (default)
Name
Department
Salary
import DataTable from 'react-data-table-component';
// Default: header separators on (subtle), no body separators
<DataTable columns={columns} data={data} />
// Body separators — subtle inset (60% height, centred)
<DataTable columns={columns} data={data} columnSeparator />
// Body separators — full-height
<DataTable columns={columns} data={data} columnSeparator="full" />
// No header separators
<DataTable columns={columns} data={data} headerSeparator={false} />
// Full-height header separators + subtle body separators
<DataTable columns={columns} data={data} headerSeparator="full" columnSeparator />Values
Both props accept the same set of values:
| Value | Effect |
|---|---|
false | No separators |
true / "subtle" | 60%-height inset line, centred vertically |
"full" | Full-height line using the theme's divider colour |
Defaults
headerSeparator: defaults totrue(subtle inset line)columnSeparator: defaults tofalse(no body separators)