TUH
Thi Ui Hoa

Drawer Width - Copy this React, Mui Component to your project

Nâng cấp bảng quản lý storage với các tính năng: A. Table Toolbar (Phía trên): - Layout: Flex container với justify-between Bên trái: - Search field với debounce: + Placeholder: "Search users..." + Icon search + Clear button - Filter buttons: + All Users + Near Limit (>80%) + Inactive Users - Date range picker Bên phải: - Export button (CSV/Excel) - Refresh button với animation - View options (density, columns) B. Enhanced Table Columns: - Checkbox cho multi-select - Username (với avatar) - Storage Info: + Limit (GB) + Used (GB) + Progress bar với gradient - Usage Stats: + Total Albums + Total Files + Last Upload - Status với chip: + Active (green) + Inactive (gray) + Near Limit (orange) + Over Limit (red) - Actions column với: + Edit button + Delete button + More options menu C. Bulk Actions Bar: - Hiện khi có rows được chọn - Hiển thị số lượng selected - Bulk actions: + Update Limit + Delete Users + Export Selected D. Edit Modal Improvements: - Tabs cho different sections: Tab 1 - Storage: - Current usage statistics - Slider cho new limit - Preview changes Tab 2 - Details: - User information - Activity history - Notes/Comments E. Advanced Features: - Column sorting (single/multiple) - Column resizing - Column reordering - Row expansion cho chi tiết - Custom filters - Sticky header - Virtual scrolling F. Responsive Design: - Horizontal scroll trên mobile - Collapsible columns - Responsive actions menu - Mobile-optimized filters

Prompt

About

drawerWidth - Create a responsive sidebar for your admin dashboard, featuring dark/light themes, logo, menu items, and user profile. Bui. Start coding now!

Share

Last updated 1 month ago