react-table-column-resizer

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

What Is New!:

Now our component will support rowSpan and colSpan on the resize cell, using this we can enable resizing on complex tables with multi level header Now the base package is updated to support vite and latest ESM builds

--bug fix - All props type made as optional, the type error from missing props values are removed

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">
      <thead>
        <tr>
          <th>1</th>
          <ColumnResizer className="columnResizer" minWidth={0} />
          <th>2</th>
        </tr>
      </thead>
      <tbody>
        <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
rowSpan	number	1	Row span for table resize cell
colSpan	number	1	Col span for table resize cell

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