Column visibility - hidden by default

[danolekh]

 column.getIsVisible = () => { const childColumns = column.columns return ( (childColumns.length ? childColumns.some(c => c.getIsVisible()) : table.getState().columnVisibility?.[column.id]) ?? true ) }

This is the api that defines whether column is visible.
I want to make all the columns hidden by default, meaning it will be visible only there is an attribute with value 'true' in provided columnVisibility object. Is there a way to override this api?

[manimovassagh]

Yes, you can do this by initializing columnVisibility with all columns set to false, then explicitly setting only the ones you want visible to true.

// Build initial visibility state with all columns hidden const initialVisibility = Object.fromEntries( columns.map((col) => [col.id ?? col.accessorKey, false]) ) const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({ ...initialVisibility, // Only these columns are visible: name: true, email: true, }) const table = useReactTable({ data, columns, state: { columnVisibility }, onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), })

If you want this to be truly dynamic (e.g., columns are defined elsewhere and you always want hidden-by-default), you can create a helper:

function hiddenByDefault( columns: ColumnDef<any>[], visible: string[] ): VisibilityState { const state: VisibilityState = {} for (const col of columns) { const id = (col as any).id ?? (col as any).accessorKey if (id) { state[id] = visible.includes(id) } } return state } // Usage: const [columnVisibility, setColumnVisibility] = useState( hiddenByDefault(columns, ['name', 'email']) )

You don't need to override getIsVisible — just make sure every column has an explicit false entry in the visibility state. The ?? true fallback in the source only kicks in when a column has no entry in the visibility object.