Skip to content

Commit 42d81e4

Browse files
committed
Add docs about hiddenColumns property of <DataTable>.
1 parent 048d39f commit 42d81e4

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

docs/DataTable.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -691,6 +691,33 @@ const PostList = () => (
691691

692692
**Tip**: To handle sorting in your custom DataTable head component, check out the [Building a custom sort control](./ListTutorial.md#building-a-custom-sort-control) section.
693693

694+
## `hiddenColumns`
695+
696+
By default, `<DataTable>` renders all `<DataTable.Col>` children. Use the `hiddenColumns` property to set hidden columns by default.
697+
698+
```tsx
699+
import { ColumnsButton, TopToolbar, List, DataTable } from 'react-admin';
700+
701+
const PostListActions = () => (
702+
<TopToolbar>
703+
<ColumnsButton />
704+
</TopToolbar>
705+
)
706+
707+
const PostList = () => (
708+
<List actions={<PostListActions />}>
709+
<DataTable hiddenColumns={['id', 'author']}>
710+
<DataTable.Col source="id" />
711+
<DataTable.Col source="title" />
712+
<DataTable.Col source="author" />
713+
<DataTable.Col source="year" />
714+
</DataTable>
715+
</List>
716+
);
717+
```
718+
719+
Using the `hiddenColumns` property instead of removing `<DataTable.Col>` elements entirely allows hidden columns to be displayed again using a `ColumnsButton`, as explained in the [Hiding or Reordering Columns](#hiding-or-reordering-columns) section.
720+
694721
## `hover`
695722

696723
By default, when a user hovers over a row, the background color changes to indicate the row is active. Set the `hover` prop to `false` to disable this behavior.

0 commit comments

Comments
 (0)