Column Visibility Guide
Examples & API
Guide
Column visibility is controlled by a dedicated columnVisibility state on the table.
Column Visibility State
The columnVisibility state is a map of column IDs to boolean values. A column is hidden when its ID is present in the map with a value of false. Columns are shown when their ID is absent from the map or has a value of true.
const [columnVisibility, setColumnVisibility] = useState({
columnId1: true,
columnId2: false, // hide this column by default
columnId3: true,
})
const table = useReactTable({
// ...
state: {
columnVisibility,
// ...
},
onColumnVisibilityChange: setColumnVisibility,
})Use initialState to set default column visibility without managing state externally.
WARNING
Do not provide columnVisibility to both initialState and state. The state option overrides initialState.
const table = useReactTable({
// ...
initialState: {
columnVisibility: {
columnId1: true,
columnId2: false, // hide this column by default
columnId3: true,
},
// ...
},
})Disable Hiding Columns
By default, all columns can be hidden or shown. Set the enableHiding column option to false to prevent specific columns from being hidden.
const columns = [
{
header: "ID",
accessorKey: "id",
enableHiding: false, // disable hiding for this column
},
{
header: "Name",
accessor: "name", // can be hidden
},
]Column Visibility Toggle APIs
Several column API methods support rendering column visibility toggles:
column.getCanHide- Disables the visibility toggle for columns withenableHidingset tofalsecolumn.getIsVisible- Sets the initial state of the visibility togglecolumn.toggleVisibility- Toggles column visibilitycolumn.getToggleVisibilityHandler- Shortcut for hooking upcolumn.toggleVisibilityto UI event handlers
{
table.getAllColumns().map((column) => (
<label key={column.id}>
<input
checked={column.getIsVisible()}
disabled={!column.getCanHide()}
onChange={column.getToggleVisibilityHandler()}
type="checkbox"
/>
{column.columnDef.header}
</label>
))
}Column Visibility Aware Table APIs
When rendering header, body, and footer cells, use the "visible" variants of table APIs to respect column visibility state. APIs like table.getAllLeafColumns and row.getAllCells do not account for column visibility. Use table.getVisibleLeafColumns and row.getVisibleCells instead.
<table>
<thead>
<tr>
{table.getVisibleLeafColumns().map((column) => (
// takes column visibility into account
<th key={column.id}>{column.columnDef.header}</th>
))}
</tr>
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
// takes column visibility into account
<td key={cell.id}>{cell.render("Cell")}</td>
))}
</tr>
))}
</tbody>
</table>Header Group APIs already account for column visibility.