addColumnOrder

addColumnOrder re-orders table columns dynamically.

Options

Options passed into addColumnOrder.

const table = createTable(data, {
  colOrder: addColumnOrder({ ... }),
});

const table = createTable(data, {
  colOrder: addColumnOrder({ ... }),
});

`initialColumnIdOrder?: string[]`

Initial column id order. Default [].

`hideUnspecifiedColumns?: boolean`

Hide columns not listed in pluginStates.[name].columnIdOrder. Default false.

Column Options

Options passed into column definitions.

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      colOrder: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      colOrder: { ... },
    },
  }),
]);

Prop Set

Extensions to the view model. Read current.props on table components.

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.colOrder}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.colOrder}
  {/each}
{/each}

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.colOrder}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.colOrder}
  {/each}
{/each}

Plugin State

State provided by addColumnOrder.

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { columnIdOrder } = pluginStates.colOrder

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { columnIdOrder } = pluginStates.colOrder

`columnIdOrder: Box<string[]>`

Active column id order. Assign a new array to reorder:

columnIdOrder.current = ['email', 'name', 'age']

columnIdOrder.current = ['email', 'name', 'age']