A flexible column resizing component for React Table Grid with touch support and accessibility features

Table Resizer 📏

The TableResizer component provides column resizing functionality for the React Table Grid. It supports both mouse and touch interactions, with full accessibility features and customizable styling options.

Features ✨

🖱️ Mouse and touch support
📱 Responsive design
♿ Full accessibility support
🎨 Customizable styling
↔️ LTR/RTL support
🎯 Precise width control

Basic Usage

import { TableResizer } from '@shakibdshy/react-tablegrid';
 
function MyTable() {
  return (
    <TableResizer
      columnId="name"
      isResizing={false}
      onResizeStart={(columnId, startX) => {
        console.log(`Started resizing column ${columnId} at ${startX}px`);
      }}
      onResizeMove={(currentX) => {
        console.log(`Resizing to ${currentX}px`);
      }}
      onResizeEnd={() => {
        console.log('Finished resizing');
      }}
    />
  );
}

Props

Required Props

`columnId`

Unique identifier for the column being resized.

<TableResizer columnId="name" />

`isResizing`

Whether the column is currently being resized.

<TableResizer isResizing={isResizing} />

`onResizeStart`

Callback when resizing begins.

<TableResizer
  onResizeStart={(columnId, startX) => {
    setResizingColumn(columnId);
    setStartPosition(startX);
  }}
/>

`onResizeMove`

Callback during resize movement.

<TableResizer
  onResizeMove={(currentX) => {
    const delta = currentX - startX;
    updateColumnWidth(columnId, initialWidth + delta);
  }}
/>

`onResizeEnd`

Callback when resizing ends.

<TableResizer
  onResizeEnd={() => {
    setResizingColumn(null);
    saveColumnWidths();
  }}
/>

Optional Props

`direction`

Direction of resizing movement.

Type: "ltr" | "rtl"
Default: "ltr"

<TableResizer direction="rtl" />

`isDragging`

Whether the resizer is being dragged.

Type: boolean
Default: false

<TableResizer isDragging={isDragging} />

`width`

Current width of the column.

Type: number

<TableResizer width={200} />

`withoutTailwind`

Use without Tailwind CSS styling.

Type: boolean
Default: false

<TableResizer withoutTailwind={true} />

Interaction Modes

Mouse Interaction

The resizer handles mouse events for desktop users:

function MouseResizer() {
  return (
    <TableResizer
      columnId="name"
      onResizeStart={(columnId, startX) => {
        // Handle mouse down
      }}
      onResizeMove={(currentX) => {
        // Handle mouse move
      }}
      onResizeEnd={() => {
        // Handle mouse up
      }}
    />
  );
}

Touch Interaction

Built-in touch support for mobile devices:

function TouchResizer() {
  return (
    <TableResizer
      columnId="name"
      onResizeStart={(columnId, startX) => {
        // Handle touch start
      }}
      onResizeMove={(currentX) => {
        // Handle touch move
      }}
      onResizeEnd={() => {
        // Handle touch end
      }}
    />
  );
}

Styling

With Tailwind (Default)

<TableResizer
  className={cn(
    "rtg-table-resizer",
    styles.resizer(),
    direction,
    isDragging && "cursor-col-resize"
  )}
/>

Without Tailwind

<TableResizer
  withoutTailwind={true}
  className={cn(
    "rtg-resizer",
    direction,
    isDragging && "is-dragging"
  )}
/>

Examples

Basic Column Resizer

function BasicResizer() {
  const [width, setWidth] = useState(200);
  const [isResizing, setIsResizing] = useState(false);
  
  return (
    <TableResizer
      columnId="name"
      isResizing={isResizing}
      width={width}
      onResizeStart={(columnId, startX) => {
        setIsResizing(true);
      }}
      onResizeMove={(currentX) => {
        const newWidth = calculateWidth(currentX);
        setWidth(newWidth);
      }}
      onResizeEnd={() => {
        setIsResizing(false);
      }}
    />
  );
}

RTL Support

function RTLResizer() {
  return (
    <TableResizer
      columnId="name"
      direction="rtl"
      onResizeStart={(columnId, startX) => {
        // Handle RTL resize start
      }}
      onResizeMove={(currentX) => {
        // Handle RTL resize move
      }}
      onResizeEnd={() => {
        // Handle RTL resize end
      }}
    />
  );
}

With Resize Indicator

function ResizerWithIndicator() {
  return (
    <TableResizer
      columnId="name"
      isResizing={isResizing}
      // The indicator will automatically show when isResizing is true
      onResizeStart={(columnId, startX) => {
        setIsResizing(true);
      }}
      onResizeEnd={() => {
        setIsResizing(false);
      }}
    />
  );
}

Accessibility ♿

The TableResizer component implements these accessibility features:

role="separator" for proper semantic meaning
aria-orientation="vertical" to indicate direction
aria-label describing the column being resized
aria-valuenow indicating current width
Keyboard support for resizing
Focus management
Touch device support

Best Practices 💡

Always provide clear visual feedback during resizing
Implement smooth animations for better UX
Set appropriate minimum and maximum widths
Handle both mouse and touch events
Consider RTL layout support
Maintain accessibility features
Use resize indicators for better visibility

Integration with TableGrid

The TableResizer is typically used within the TableGrid component:

function MyTable() {
  return (
    <TableGrid
      columns={columns}
      data={data}
      enableColumnResize={true}
      columnResizeDirection="ltr"
      // The TableResizer will be automatically rendered
      // when enableColumnResize is true
    />
  );
}

Table Resizer 📏

On this page