Components
Loading preview...
This component is a feature-rich, interactive data table built entirely with Shadcn UI components. It includes a fixed header and footer, allowing the table body to scroll independently, which ensures that column labels and summary information remain visible at all times. Each row includes a checkbox for selection, with the ability to select multiple rows at once. Actions for each row are accessible through a dropdown menu, offering options like “Edit” and “Delete.” The Edit action opens a dialog where all fields of the selected row can be modified using input fields and select menus, keeping the table layout intact and avoiding inline edits that can disrupt the table’s appearance. This design makes the table both highly reusable and user-friendly, suitable for applications that require structured data management, quick updates, and a clean, consistent interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/table-dialogimport Component from "@/components/ui/table-dialog";
export default function DemoOne() {
return <Component />;
}