Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/resizable-table"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>
);
}