table-column-resizer
v1.1.3
Published
Place in between `td` tags to automatically add resizing functionality.
Downloads
26
Maintainers
Readme
Table Column Resizer
A simple column resizer component for Html 5 Table
Inspired from React Column Resizer, Fixed width and drag problems
Place in between td
tags to add resizing functionality. Works with touch and mouse events.
Usage:
npm install table-column-resizer
* Requires react
as a peer dependency: npm install react
import React from "react";
import { render } from "react-dom";
import ColumnResizer from "table-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