Resizable Table

Dashboards 343

About

The ResizableTable component is a fully-featured data table with dynamic column resizing, sorting, pagination, and export functionality designed for displaying employee or similar structured data. It includes built-in animations, theme-aware styling, and responsive design that adapts to both light and dark modes while maintaining accessibility standards. This component is ideal for admin dashboards, HR management systems, or any application requiring interactive data visualization with customizable column widths and comprehensive data manipulation capabilities.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Resizable Table to your project and fits it to your theme.

Code

How Resizable Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  ResizableTable,
  type Employee,
} from "@/components/ui/resizable-table";

export default function ResizableTableDemo() {
  const handleEmployeeSelect = (employeeId: string) => {
    console.log(`Selected employee:`, employeeId);
  };

  const handleColumnResize = (columnKey: string, newWidth: number) => {
    console.log(`Column ${columnKey} resized to ${newWidth}px`);
  };

   return (
    <div className="min-h-screen bg-background py-6 md:py-12">
      <div className="container mx-auto px-2 sm:px-4">
        <div className="mb-8 md:mb-12">
          <ResizableTable 
            title="Employee" 
            onEmployeeSelect={handleEmployeeSelect}
            onColumnResize={handleColumnResize}
          />
        </div>
      </div>
    </div>
  );
}