You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/api/core/cell.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Cell
2
+
title: Cell APIs
3
3
---
4
4
5
5
These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/column.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Column
2
+
title: Column APIs
3
3
---
4
4
5
5
These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/header-group.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: HeaderGroup
2
+
title: HeaderGroup APIs
3
3
---
4
4
5
5
These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/header.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Header
2
+
title: Header APIs
3
3
---
4
4
5
5
These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/row.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Row
2
+
title: Row APIs
3
3
---
4
4
5
5
These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../guide/features).
The column visibility feature allows table columns to be hidden or shown dynamically. In previous versions of react-table, this feature was a static property on a column, but in v8, there is a dedicated `columnVisibility` state and APIs for managing column visibility dynamically.
25
+
26
+
### Column Visibility State
27
+
28
+
The `columnVisibility` state is a map of column IDs to boolean values. A column will be hidden if its ID is present in the map and the value is `false`. If the column ID is not present in the map, or the value is `true`, the column will be shown.
Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option.
48
+
49
+
> **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other.
50
+
51
+
```jsx
52
+
consttable=useReactTable({
53
+
//...
54
+
initialState: {
55
+
columnVisibility: {
56
+
columnId1:true,
57
+
columnId2:false, //hide this column by default
58
+
columnId3:true,
59
+
},
60
+
//...
61
+
},
62
+
});
63
+
```
64
+
65
+
### Disable Hiding Columns
66
+
67
+
By default, all columns can be hidden or shown. If you want to prevent certain columns from being hidden, you set the `enableHiding` column option to `false` for those columns.
68
+
69
+
```jsx
70
+
constcolumns= [
71
+
{
72
+
header:'ID',
73
+
accessorKey:'id',
74
+
enableHiding:false, // disable hiding for this column
75
+
},
76
+
{
77
+
header:'Name',
78
+
accessor:'name', // can be hidden
79
+
},
80
+
];
81
+
```
82
+
83
+
### Column Visibility Toggle APIs
84
+
85
+
There are several column API methods that are useful for rendering column visibility toggles in the UI.
86
+
87
+
-`column.getCanHide` - Useful for disabling the visibility toggle for a column that has `enableHiding` set to `false`.
88
+
-`column.getIsVisible` - Useful for setting the initial state of the visibility toggle.
89
+
-`column.toggleVisibility` - Useful for toggling the visibility of a column.
90
+
-`column.getToggleVisibilityHandler` - Shortcut for hooking up the `column.toggleVisibility` method to a UI event handler.
91
+
92
+
```jsx
93
+
{table.getAllColumns().map((column) => (
94
+
<label key={column.id}>
95
+
<input
96
+
checked={column.getIsVisible()}
97
+
disabled={!column.getCanHide()}
98
+
onChange={column.getToggleVisibilityHandler()}
99
+
type="checkbox"
100
+
/>
101
+
{column.columnDef.header}
102
+
</label>
103
+
))}
104
+
```
105
+
106
+
### Column Visibility Aware Table APIs
107
+
108
+
When you render your header, body, and footer cells, there are a lot of API options available. You may see APIs like `table.getAllLeafColumns` and `row.getAllCells`, but if you use these APIs, they will not take column visibility into account. Instead, you need to use the "visible" variants of these APIs, such as `table.getVisibleLeafColumns` and `row.getVisibleCells`.
109
+
110
+
```jsx
111
+
<table>
112
+
<thead>
113
+
<tr>
114
+
{table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
115
+
//
116
+
))}
117
+
</tr>
118
+
</thead>
119
+
<tbody>
120
+
{table.getRowModel().rows.map((row) => (
121
+
<tr key={row.id}>
122
+
{row.getVisibleCells().map((cell) => ( // takes column visibility into account
123
+
//
124
+
))}
125
+
</tr>
126
+
))}
127
+
</tbody>
128
+
</table>
129
+
```
130
+
131
+
If you are using the Header Group APIs, they will already take column visibility into account.
0 commit comments