사용자 관리

38. 데이터 테이블 Design an advanced data table component: **Table Container**: - Horizontal scroll wrapper for overflow - Sticky header on scroll - Border: 1px gray-200, radius-12px **Header Row**: - Background: gray-50 - Font: 12px uppercase, gray-600, tracking-wide - Padding: 12px 16px - Sortable: icon indicator, click to sort - Resizable columns: drag handle **Sort Indicators**: - Unsorted: both arrows, gray-300 - Ascending: up arrow, gray-900 - Descending: down arrow, gray-900 **Body Rows**: - Alternating: white / gray-50 (optional) - Hover: gray-100 background - Selected: blue-50 background - Border-bottom: 1px gray-100 - Padding: 16px **Cell Types**: - Text: default, truncate with tooltip - Number: right-aligned, monospace font - Date: formatted, relative option - Status badge: colored pill - Avatar + name combo - Actions: icon buttons or dropdown **Selection**: - Checkbox column (sticky left) - Select all in header - Bulk actions bar appears on selection **Pagination**: - Bottom bar: items per page + page nav - "Showing 1-10 of 142 results" - Items per page: 10, 25, 50, 100 **Column Features**: - Show/hide columns toggle - Drag to reorder - Pin columns left/right **Empty State**: - Illustration + message - "No data found" + clear filters action **Loading State**: - Skeleton rows - Or overlay spinner Tech: React + TanStack Table + Tailwind