react-table-column-resizer
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

React 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 and add "column_resize_table" to the table. Works with touch and mouse events.

Note: Don't add any min-width through css for table columns other than resize component

For react version 16 use version 1.0.2

Demo: https://codesandbox.io/s/react-table-column-resizer-3yuqv

Usage:

npm install react-table-column-resizer

Add column_resize_table class to the table

Add css

.column_resize_table th::before {content: ''; display: block; width: var(--column_resize_before_width);}

to css files

* Requires react as a peer dependency: npm install react

import React from "react";
import { render } from "react-dom";
import ColumnResizer from "react-table-column-resizer";

const App = () => (
  <div>
    <table class="column_resize_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
id (mandatory) number Uniq id for each column resize
disabled bool false Set to true if you want to disable resizing
minWidth (optional) number undefined The minimum width for the columns (in pixels)
maxWidth (optional) number null, undefined The maximum width for the columns (in pixels)
defaultWidth (optional) number null, undefined The default width for the columns (in pixels)
resizeStart (optional) function function(): void Trigger when resize start
resizeEnd (optional) function function(): number Trigger when resize end and return the last dragged column width
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
  • The width in table column need to be in logic of table css, it must leave a column without max-width

Package Sidebar

Install

npm i react-table-column-resizer

Weekly Downloads

385

Version

1.2.3

License

GPL-3.0-only

Unpacked Size

48.2 kB

Total Files

6

Last publish

Collaborators

  • bibinantony1998