Plugins
addResizedColumns
addResizedColumns allows columns to be resized programatically and dynamically.
Options
Options passed into addResizedColumns.
const table = createTable(data, {
resize: addResizedColumns({ ... }),
});
Nothing here so far.
Column Options
Options passed into column definitions.
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
Extensions to the view model.
Subscribe to .props() on the respective table components.
{#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>
reset: Action
Use reset on a resizer element to reset column to initial width.
{#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.reset />
</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
State provided by addResizedColumns.
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.