Drag resize

You can allow user to resize table columns using the resizable prop of <Table />.

DragResizeTable.tsx

function DragResize() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            resizable // enable column resize
        />
    );
}

columns.ts

export const peopleColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName' },
    { title: 'Job', key: 'about.job', flex: 1.5 }
];

Live example

info

Hover on the vertical lines of the Live Example and start dragging.

caution

This feature is experimental.