# Table Components > Table patterns: sortable, filterable, paginated, responsive, and expandable row tables > 테이블 패턴: 정렬, 필터링, 페이지네이션, 반응형, 확장 가능한 행 테이블 **Category**: Components | **Tags**: table, data, sortable, pagination, responsive, tailwind | **Difficulty**: Intermediate ## Preview ``` +--- Sortable Table --------------------------------+ | Name ^ | Email | Role | Status | Action | |----------|-------------|--------|--------|--------| | Alice | a@corp.com | Admin | Active | ... | | Bob | b@corp.com | User | Paused | ... | +---------------------------------------------------+ | Showing 1-10 of 248 [< 1 2 3 ... 25 >] | +---------------------------------------------------+ ``` ## Quick Start ```bash # 1. Copy the table variant you need # 2. Sort and filter use vanilla JS (no dependencies) # 3. Replace static rows with data from your API using JS template literals ``` ## Full Code ```html Table Components

Table Components

Users

248 total
Name ⇅ Email ⇅ Role Status ⇅ Joined Actions
AK
Alice Kim		 alice@company.com Admin Active Mar 15, 2026
BW
Bob Wilson		 bob@company.com Editor Active Feb 28, 2026
CJ
Carol Jones		 carol@company.com Viewer Pending Mar 10, 2026
DL
David Lee		 david@company.com Editor Inactive Jan 05, 2026
Showing 1-10 of 248 results
...

Expandable Rows

Order Customer Total Status
▶ #ORD-001 Alice Kim $249.00 Shipped
▶ #ORD-002 Bob Wilson $89.00 Processing
``` ## Customization Guide - **Columns**: Add or remove `` and corresponding `` elements - **Sorting**: The `sortTable()` function works on any text column; for numeric sorting add `parseFloat()` - **Pagination**: Wire up page buttons to slice your data array or call paginated API - **Bulk actions**: Use the checkboxes to collect selected row IDs for bulk operations - **Responsive**: On mobile, wrap table in `overflow-x-auto` for horizontal scroll - **Expandable rows**: The toggle `onclick` uses `nextElementSibling` - ensure detail row is immediately after ## 2026 Trend Notes - Toolbar with search + filter + export above the table is the standard data table pattern - Status badges with colored dots provide instant visual feedback - Checkbox column enables bulk operations (delete, export, assign) - Expandable rows eliminate the need for separate detail pages - Vanilla JS sort/filter keeps the template framework-agnostic