Components
Loading preview...
This Fixed Header and Footer Table component is a highly practical and user-friendly UI element built with Shadcn UI. It ensures that the table header remains fixed at the top and the footer stays visible at the bottom, while the rows in the middle can scroll independently. This layout is especially useful when working with long datasets, as users can always see the column titles for context and the footer for totals or summary information without losing track while scrolling. By separating the header, body, and footer into distinct sections with a scrollable middle, the component improves readability and usability in dashboards, financial reports, admin panels, and data-heavy applications. Its clean design, responsiveness, and clarity make it a versatile table structure for modern web apps.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/fixed-header-footer-table"use client"
import FixedHeaderFooterTable from "@/components/ui/fixed-header-footer-table";
export default function DemoOne() {
return <FixedHeaderFooterTable />;
}