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.

[amasen02]

Because (table.getState().columnVisibility?.[column.id]) ?? true is hardcoded inside createColumn in @tanstack/table-core/src/features/Visibility.ts, TanStack Table v8 treats any column omitted from columnVisibility as visible (true) by default.

Depending on whether you want a clean declarative pattern or a direct API override, here are the two ways to achieve hidden-by-default behavior:

---

Approach 1: Helper Initialization (Declarative & Safe)

The standard and most robust approach in v8 is to populate initialState.columnVisibility (or controlled state.columnVisibility) by setting all leaf column IDs to false upfront, then merging your desired visible columns:

import { useMemo } from 'react';
import { ColumnDef, useReactTable, getCoreRowModel } from '@tanstack/react-table';

function useHiddenByDefaultVisibility<TData>(
  columns: ColumnDef<TData>[],
  activeVisibleColumnIds: string[]
) {
  return useMemo(() => {
    const visibility: Record<string, boolean> = {};

    // Recursively traverse column definitions to extract all leaf column IDs
    const extractIds = (cols: ColumnDef<TData>[]) => {
      for (const col of cols) {
        if ('columns' in col && Array.isArray(col.columns)) {
          extractIds(col.columns);
        } else {
          const id = col.id ?? (col as any).accessorKey;
          if (id) visibility[id] = false;
        }
      }
    };

    extractIds(columns);

    // Explicitly enable only the requested columns
    for (const id of activeVisibleColumnIds) {
      visibility[id] = true;
    }

    return visibility;
  }, [columns, activeVisibleColumnIds]);
}

Usage:

const columnVisibility = useHiddenByDefaultVisibility(columns, ['name', 'status']);

const table = useReactTable({
  data,
  columns,
  state: {
    columnVisibility,
  },
  onColumnVisibilityChange: setColumnVisibility,
  getCoreRowModel: getCoreRowModel(),
});

---

Approach 2: Overriding column.getIsVisible on Table Instance

If you strictly want column.getIsVisible() to return false whenever columnVisibility[column.id] is undefined, you can wrap table creation and override getIsVisible across all leaf columns. Be sure to preserve the parent group check so grouped headers still behave correctly:

const table = useReactTable({
  data,
  columns,
  state: { columnVisibility },
  onColumnVisibilityChange: setColumnVisibility,
  getCoreRowModel: getCoreRowModel(),
});

// Override leaf column visibility resolution
table.getAllLeafColumns().forEach((column) => {
  column.getIsVisible = () => {
    // Only returns true if explicitly present with a truthy value
    return Boolean(table.getState().columnVisibility?.[column.id]);
  };
});

Summary:

• Approach 1 is recommended because it keeps the table state purely serializable and avoids mutating internal instance methods on re-renders.
• Approach 2 is ideal if you have deeply dynamic or plugin-driven columns where generating the initial dictionary upfront is inconvenient.

[Ultron09]

Hi @danolekh! Regarding Column visibility - hidden by default in TanStack Table:

1. Row Model Pipeline:
   • Ensure models are supplied in order: getCoreRowModel(), getFilteredRowModel(), getSortedRowModel(), getPaginationRowModel().
2. Column Definitions:
   • Use createColumnHelper<T>() to enforce strict TypeScript validation on accessor keys and cell renderers.
3. Rendering Cells:
   • Always wrap cell outputs in flexRender(cell.column.columnDef.cell, cell.getContext()) to allow JSX or string returns.

Let us know if you have specific code snippet details!