Plugins

addColumnOrder

addColumnOrder re-orders table columns dynamicaly.

# Options

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

# initialColumnIdOrder?: string[]

Sets the initial column id order.

Defaults to [].

# hideUnspecifiedColumns?: boolean

Hides columns that are not specified in pluginStates.[pluginName].columnIdOrder.

Defaults to false.

# Column Options

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

Nothing here so far.

# Prop Set

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.colOrder} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.colOrder} <!-- HeaderCell props -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

Nothing here so far.

# Plugin State

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

# columnIdOrder: Writable<string[]>

The active column id order.

# Examples

# Simple column ordering