logo

addColumnOrder

addColumnOrder re-orders table columns dynamically.

Options

Information:
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

Information:
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

Information:
Extensions to the view model. Subscribe to .props().
{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.colOrder}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.colOrder}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}
{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.colOrder}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.colOrder}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

Plugin State

Information:
State provided by addColumnOrder.
const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.colOrder;
const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.colOrder;

columnIdOrder: Writable<string[]>

Active column id order.