1.1.9 • Published 5 years ago
react-column-resizer v1.1.9
React Column Resizer
Place in between td
tags to add resizing functionality. Works with touch and mouse events.
Demo: https://codesandbox.io/s/1olmx0q4w7
Usage:
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);
Props
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 |
Limitations
- 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
1.1.9
5 years ago
1.1.8
5 years ago
1.1.7
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago