Act as a senior front-end engineer who builds admin tools. Build a data table for {{data_to_store}} in my {{tech_stack}} project, reusing the table and form components already there. Semantics: a real table with a caption, th scope="col", and sort buttons inside each sortable th, with aria-sort on the th itself. Columns and alignment: - text left, numbers right in tabular-nums with fixed decimals, dates in one format with the full timestamp in a title, status as a text badge (color is never the only signal) - headers align with their data; never center numbers - truncate long text with an ellipsis and a way to see it all; numbers never wrap Layout: sticky header; sticky first column when scrolling sideways; row height 44px comfortable or 36px compact via a density toggle. 1280: full table; 768: hide low-value columns and say which; 360: either stacked cards per row or a horizontally scrolling region that's labeled and focusable. Pick by column count and tell me why. Data: - sort, filter and paginate on the server, with all state in the URL so views can be shared and survive reload - search debounced 250ms; active filters as removable chips with Clear all - page sizes 25, 50, 100, and a count like "1 to 25 of 312" - row selection with a checkbox column; a bulk action bar appears; offer "Select all 312" explicitly States: - loading: skeleton rows that keep column widths, so nothing jumps - empty: nothing yet, with one action to add the first record - no results: say which filters caused it, with a Clear filters button - error: plain message and Retry; keep stale data visible if there was some - 1 row and 10,000 rows both look intentional Accessibility: announce result counts in a polite live region; keyboard reaches every control with a visible focus-visible ring. Motion: 150ms row hover only; skeletons don't shimmer under prefers-reduced-motion. Avoid: client-side sorting of a single page, zebra stripes plus borders plus shadows, centered numbers.