Place in between td
tags to add resizing functionality. Works with touch and mouse events.
Demo: https://codesandbox.io/s/1olmx0q4w7
npm install react-column-resizer
* Requires react
as a peer dependency: npm install react
import React from "react";
import { render } from "react-dom";
import ColumnResizer from "react-column-resizer";
const App = () => (
<div>
<table>
<tbody>
<tr>
<td>1</td>
<ColumnResizer className="columnResizer" minWidth={0} />
<td>2</td>
</tr>
<tr>
<td>3</td>
<td />
<td>4</td>
</tr>
</tbody>
</table>
</div>
);
render(<App />, document.body);
Prop Name | Type | Default Value | Description |
---|---|---|---|
disabled | bool | false |
Set to true if you want to disable resizing |
minWidth | number | 0 |
The minimum width for the columns (in pixels) |
className | string | "" |
Any custom classes. If set, default width and backgroundColor styles will not be applied |
- You have to put filler
<td/>
's in rows you don't use the resizer - The resizer needs to be wide enough to actually grab. To do this while maintaining a thin bar, set the background color to
transparent
and assign a value toborder-left