Plugins

addResizedColumns

addResizedColumns allows columns to be resized programatically and dynamically.

# Options

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

Nothing here so far.

# Column Options

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

# initialWidth?: number

Sets the initial width of the column in px.

Defaults to auto width.

# minWidth?: number

Sets the minimum width of the column in px.

Defaults to no minimum width, but some elements have an intrinsic minimum width that cannot be overridden.

# maxWidth?: number

Sets the maximum width of the column in px.

Defaults to no maximum width.

# disable?: boolean

Disables resizing on the column. If all columns of a group column are disabled, the group column is also disabled.

Defaults to false.

# Prop Set

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

# HeaderCell

The prop extension provided to HeaderCell is a Svelte action.

Use the action on the header cell element to initialize the plugin properly.

{#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

Use drag on a resizer element to provide drag-to-resize behaviour.

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

...

<style>
  th {
    position: relative;
  }

  .resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    width: 8px;
    background: lightgray;
    cursor: col-resize;
    z-index: 1;
  }
</style>

# disabled: boolean

Whether the data column represented by the header cell has resizing disabled.

# Plugin State

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

# columnWidths: Writable<Record<string, number>>

The current column widths. A record of column id to column width.

# Examples

# Simple column resizing