reactabular-resizable
implements a formatter that provides handles for altering column widths. It provides two functions:
column({ parent = document, onDrag, minWidth = 10, props: { ... }})
. This formatter does most of the work.helper({ globalId, getId })
returns an object withinitialize({ columns, getId: (column, index) => ...})
,cleanup()
, andupdate({ column, width })
methods. The helper can be used with the formatter to implement performant resizing. It utilizes CSS stylesheets for this purpose. It also expects you setwidth
per each column at your column definition.
Note that the current implementation doesn't constrain the total width of the table. That would require additional logic as you would have to check for this while altering a column width.
If you want to resizing with nested column, give a resizableFormatter
formatter on children except parent column.
Below example included nested column. If you don't want to using nested column, remove related nested columns code.
How to Use?
The following example adjusts column widths through CSS to keep the performance high while using a sticky header/body. This way we can avoid touching the DOM through React and let the browser do the work.
You can customize props
of specific portions through the following protocol:
props = container: {} value: {} handle: {}
You can find suggested default styling for the package at
style.css
in the package root.
/*import React from 'react';import * as Table from 'reactabular-table';import * as Sticky from 'reactabular-sticky';import * as resizable from 'reactabular-resizable';import uuid from 'uuid';import { generateRows } from './helpers';import * as resolve from 'table-resolver';*/ const schema = type: 'object' properties: id: type: 'string' name: type: 'string' address: type: 'string' company: type: 'string' age: type: 'integer' required: 'id' 'name' 'age' 'company';const rows = ; Component { ; thisstate = columns: this rows ; thistableHeader = null; thistableBody = null; } { thisresizableHelper = resizable; // Patch the column definition with class names. this; } { thisresizableHelper; } { const resizableFormatter = resizable; return property: 'name' header: label: 'Name' formatters: resizableFormatter width: 100 header: label: 'About' children: property: 'company' header: label: 'Company' formatters: resizableFormatter width: 100 property: 'address' header: label: 'Address' formatters: resizableFormatter width: 200 property: 'age' header: label: 'Age' ; } { return `column--`; } { const rows columns = thisstate; const resolvedColumns = resolve; const resolvedRows = resolverows; return <Table.Provider ="pure-table pure-table-striped" = = > <Sticky.Header = = = = /> <Sticky.Body = ="id" = = = = /> </Table.Provider> ; } { return className: rowIndex % 2 ? 'odd-row' : 'even-row' ; } <ResizableColumnsTable />
How to Move the Widget to the Column Border?
Given it can be neater to have the resize widget at the column border, you can offset it like this:
You will need to figure out the exact offset based on your header cell size.