addResizedColumns

addResizedColumns allows columns to be resized programatically and dynamically.

Options

Options passed into addResizedColumns.

const table = createTable(data, {
  resize: addResizedColumns({ ... }),
});

const table = createTable(data, {
  resize: addResizedColumns({ ... }),
});

Column Options

Options passed into column definitions.

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

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

`initialWidth?: number`

Initial width in px.

`minWidth?: number`

Minimum width in px.

`maxWidth?: number`

Maximum width in px.

`disable?: boolean`

Disable resizing for the column. If all child columns of a group are disabled, the group is disabled.

Prop Set

Extensions to the view model. Subscribe to .props().

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.resize}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.resize}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.resize}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.resize}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

HeaderCell action

Use use:props.resize on the <th> to initialize the plugin.

{#each headerRow.cells as cell (cell.id)}
  <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
    <th {...attrs} use:props.resize> ... </th>
  </Subscribe>
{/each}

{#each headerRow.cells as cell (cell.id)}
  <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
    <th {...attrs} use:props.resize> ... </th>
  </Subscribe>
{/each}

`drag: Action`

Drag-to-resize handle: <div class="resizer" use:props.resize.drag />

`reset: Action`

Reset width handle: <div class="resizer" use:props.resize.reset />