# react-table-column-resizer

> Place in between `td` tags to automatically add resizing functionality.

Latest version **2.0.3** (published 2026-02-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-table-column-resizer
pnpm add react-table-column-resizer
yarn add react-table-column-resizer
bun add react-table-column-resizer
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2026-02-25 |
| First published | 2021-09-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Bibin Antony |
| Maintainers | bibinantony1998 |
| Keywords | Table column resize, react table column resize, html table column resize, table resize component, Table column resize react, column resize, react, html, table, column, auto, resize |

## Links

- npm: https://www.npmjs.com/package/react-table-column-resizer
- Repository: https://github.com/bibinantony1998/react-table-column-resizer
- Homepage: https://github.com/bibinantony1998/react-table-column-resizer#readme
- Issues: https://github.com/bibinantony1998/react-table-column-resizer/issues
- npm.io page: https://npm.io/package/react-table-column-resizer

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2026-02-25
- 2.0.2 — 2026-02-25
- 2.0.1 — 2025-06-05
- 2.0.0 — 2025-05-25
- 1.3.2 — 2025-04-16
- 1.3.1 — 2025-04-11
- 1.3.0 — 2025-03-08
- 1.2.8 — 2025-03-08
- 1.2.7 — 2025-03-08
- 1.2.6 — 2025-03-08
- 1.2.5 — 2025-03-08
- 1.2.4 — 2024-08-30
- 1.2.3 — 2023-06-12
- 1.2.2 — 2023-06-09
- 1.2.1 — 2023-06-09
- … 20 more at https://npm.io/package/react-table-column-resizer/versions

## README

## React Table Column Resizer | A React component by **Bibin Antony**
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!:
* Internal architecture modernized and tested with React 19, maintaining compatibility for React >=18.
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

<sup>* Requires `react` as a peer dependency: `npm install react`</sup>


```
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 (optional) | string |  | 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

---
_Source: https://npm.io/package/react-table-column-resizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._