addHiddenColumns

addHiddenColumns hides table columns dynamically.

Options

Options passed into addHiddenColumns.

const table = createTable(data, {
  hide: addHiddenColumns({ ... }),
});

const table = createTable(data, {
  hide: addHiddenColumns({ ... }),
});

`initialHiddenColumnIds?: string[]`

Initial hidden column ids. Default [].

const table = createTable(data, {
  hide: addHiddenColumns({
    initialHiddenColumnIds: ['internalId', 'createdAt'],
  }),
});

const table = createTable(data, {
  hide: addHiddenColumns({
    initialHiddenColumnIds: ['internalId', 'createdAt'],
  }),
});

Column Options

addHiddenColumns does not accept any column options.

Prop Set

addHiddenColumns does not extend the view model with any props.

Interactions

Hiding a column does not clear its filter. A value set through addColumnFilters keeps applying while the column is hidden.
addTableFilter skips hidden columns unless it was created with includeHiddenColumns: true.

Plugin State

State provided by addHiddenColumns.

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { hiddenColumnIds } = pluginStates.hide

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { hiddenColumnIds } = pluginStates.hide

`hiddenColumnIds: Box<string[]>`

Active hidden column ids. Assign a new array to show or hide columns dynamically — columns whose ids are in the array are removed from the view model.

// Hide a column.
hiddenColumnIds.current = [...hiddenColumnIds.current, 'createdAt']

// Show a column.
hiddenColumnIds.current = hiddenColumnIds.current.filter((id) => id !== 'createdAt')

// Hide a column.
hiddenColumnIds.current = [...hiddenColumnIds.current, 'createdAt']

// Show a column.
hiddenColumnIds.current = hiddenColumnIds.current.filter((id) => id !== 'createdAt')

A common pattern drives visibility with a checkbox per column:

<script>
    const { flatColumns, pluginStates } = table.createViewModel(columns)
    const { hiddenColumnIds } = pluginStates.hide

    const toggle = (id, visible) => {
        hiddenColumnIds.current = visible
            ? hiddenColumnIds.current.filter((i) => i !== id)
            : [...hiddenColumnIds.current, id]
    }
</script>

{#each flatColumns as col (col.id)}
    <label>
        <input
            type="checkbox"
            checked={!hiddenColumnIds.current.includes(col.id)}
            onchange={(e) => toggle(col.id, e.currentTarget.checked)}
        />
        {col.header}
    </label>
{/each}

<script>
    const { flatColumns, pluginStates } = table.createViewModel(columns)
    const { hiddenColumnIds } = pluginStates.hide

    const toggle = (id, visible) => {
        hiddenColumnIds.current = visible
            ? hiddenColumnIds.current.filter((i) => i !== id)
            : [...hiddenColumnIds.current, id]
    }
</script>

{#each flatColumns as col (col.id)}
    <label>
        <input
            type="checkbox"
            checked={!hiddenColumnIds.current.includes(col.id)}
            onchange={(e) => toggle(col.id, e.currentTarget.checked)}
        />
        {col.header}
    </label>
{/each}