Advanced User Data Table with Search, Pagination & Dialogs
A comprehensive data table component for user management with enterprise-grade features.
Features
- Real-time search filtering - Search by name or email with instant results
- Pagination - 10 rows per page with page navigation
- Edit & Delete dialogs - Modal dialogs for user actions
- Status badges - Active/Inactive with gradient styling
- Responsive design - Mobile-friendly with horizontal scroll on small screens
- Memoized filtering - Optimized performance with useMemo
- Custom primary color - Google Blue (#4285F4) theme
Installation
npm install lucide-react
Dependencies
This component requires the following shadcn/ui components:
- Input
- Badge
- Button
- Dialog
- Table
Make sure you have them installed:
npx shadcn-ui@latest add input badge button dialog table
Usage
import DataTable from '@/components/data-table-users'
export default function Page() {
return <DataTable />
}
Customization Options
- User data: Modify the
users array with your own data
- Rows per page: Change the
rowsPerPage variable
- Primary color: Update the
primaryColor and all #4285F4 references
- Search placeholder: Customize the search input text
- : Add forms to Edit dialog for real updates
