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.

Plugin State

State provided by addHiddenColumns.

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { hiddenColumnIds } = pluginStates.hide;

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { hiddenColumnIds } = pluginStates.hide;

`hiddenColumnIds: Writable<string[]>`

Active hidden column ids. Update this store to show or hide columns dynamically — columns whose ids are in the array are removed from the view model.

// Hide a column.
hiddenColumnIds.update((ids) => [...ids, 'createdAt']);

// Show a column.
hiddenColumnIds.update((ids) => ids.filter((id) => id !== 'createdAt'));

// Hide a column.
hiddenColumnIds.update((ids) => [...ids, 'createdAt']);

// Show a column.
hiddenColumnIds.update((ids) => ids.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.update((ids) =>
            visible ? ids.filter((i) => i !== id) : [...ids, id]
        );
    };
</script>

{#each flatColumns as col (col.id)}
    <label>
        <input
            type="checkbox"
            checked={!$hiddenColumnIds.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.update((ids) =>
            visible ? ids.filter((i) => i !== id) : [...ids, id]
        );
    };
</script>

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