## 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