react-table-column-resizer v1.3.0

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

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