Column Resizing Example

This example shows you how to implement column resizing in your table. With column resizing enabled, users can drag and adjust the width of table columns, making it easier to view data that varies in length.

Overview

In this example, we demonstrate:

• How to define columns with type safety using createColumnHelper
• How to enable column resizing by setting the enableColumnResize prop
• Handling state changes to monitor column resizing events
• Configuring the direction of the column resizing (left-to-right or right-to-left) using a hook

Example

Key Concepts

Enabling Resizing

To allow users to resize columns, set the enableColumnResize prop to true:

<TableGrid enableColumnResize // other props />

Handling State Changes

The onStateChange callback lets you track changes in table state, including column resizing events. This can be useful for debugging or saving user preferences.

onStateChange={(state) => {
  console.log("Table state changed:", state);
}}

Configuring Resizing Direction

The columnResizeDirection prop accepts either ltr (left-to-right) or rtl (right-to-left). This example uses a custom hook (useDirection) to dynamically provide the direction.

columnResizeDirection={direction as "ltr" | "rtl"}

Customization Tips

• Styling: Use the styleConfig prop to customize how the table, headers, rows, and cells look during resizing.
• Performance: For large datasets, consider performance optimizations such as memoization.

Best Practices

1. Type Safety: Always define your data structures using TypeScript interfaces and use createColumnHelper for consistency.
2. User Feedback: Consider providing visual indicators (like a resize handle) to show when a column is being resized.
3. Accessibility: Ensure that column resizing interactions are keyboard accessible and provide appropriate ARIA labels where needed.

Next Steps

• Explore Column Pinning to learn how to permanently fix columns.
• Continue to Basic Table to get familiar with table setups.
• Check out Virtualized Table for handling large datasets efficiently.