Does resizing change my data?

No. The component only changes column widths. Cell content and row order remain caller-owned.

How does this work on a narrow screen?

The table scrolls horizontally inside its labelled region. The page layout stays within the viewport.

Table Column Resize

Resize semantic data-table columns with pointer or keyboard controls.

Project	Owner	Status
Atlas redesign	Mira Chen	In review
Meridian launch	Avery Jones	On track

Customise

Table label

Code

const columns = [
  { id: "project", label: "Project", width: 180 },
  { id: "owner", label: "Owner", width: 140 },
  { id: "status", label: "Status", width: 130 },
];
const rows = [
  { id: "atlas", cells: { project: "Atlas redesign", owner: "Mira Chen", status: "In review" } },
  { id: "meridian", cells: { project: "Meridian launch", owner: "Avery Jones", status: "On track" } },
];

<TableColumnResize
  label="Quarterly operations"
  columns={columns}
  rows={rows}
/>

Table Column Resize gives readers room to inspect wide or important fields without changing the table's records. Each column has a starting width and optional bounds; its separator responds to pointer dragging and arrow keys.

The component keeps the table semantic and wraps horizontal overflow in a labelled scroll region. Data, sorting and persistence remain owned by your application.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/table-column-resize

Usage

import { TableColumnResize } from "@/components/table-column-resize";

const columns = [
  { id: "project", label: "Project", width: 180, minWidth: 120, maxWidth: 280 },
  { id: "owner", label: "Owner", width: 140 },
];
const rows = [
  { id: "atlas", cells: { project: "Atlas redesign", owner: "Mira Chen" } },
];

export function ProjectTable() {
  return <TableColumnResize label="Projects" columns={columns} rows={rows} />;
}

Props

Prop	Type	Default	Description
label	string	required	Accessible name for the table and its horizontal scroll region.
columns	ResizableTableColumn[]	required	Ordered columns with stable IDs, labels, initial widths and optional bounds.
rows	ResizableTableRow[]	required	Ordered rows with stable IDs and cell values keyed by column ID.
columnWidths	Record<string, number>	undefined	Controlled pixel widths keyed by column ID.
defaultColumnWidths	Record<string, number>	undefined	Initial uncontrolled overrides.
onColumnWidthsChange	(widths) => void	undefined	Receives the complete width map after pointer or keyboard resizing.
emptyMessage	string	No rows to display.	Message shown when the rows array is empty.
className	string	undefined	Additional classes merged onto the outer section.

Customisation

Widths are measured in CSS pixels and constrained by each column's minWidth and maxWidth. Arrow keys adjust by 8px; Shift plus an arrow adjusts by 24px.

<TableColumnResize label="Projects" columns={columns} rows={rows} />

Frequently asked questions

Does resizing change my data?: No. The component only changes column widths. Cell content and row order remain caller-owned.
How does this work on a narrow screen?: The table scrolls horizontally inside its labelled region. The page layout stays within the viewport.

Related components

Explore data componentsBrowse table components for data-heavy React interfaces.Table components