Blocks
Data Table - Lists
Table blocks for users, team directories, customers, invoices, transactions, API logs, inventory and compact reports, with search, sorting, filters and row actions built on the Table component.
These blocks are built on UiTable with plain Vue state, so there is no table library to learn. Search, sorting and filters run on the client over typed props like users, customers or invoices. Swap the sample data and the action handlers for your own API, or move to TanStack Table when you need server side paging.
All people, companies and numbers are fictional and the photos are placeholders from Unsplash and Pravatar. Sortable headers use a real button and set aria-sort, and every table scrolls inside its card on small screens.
Style One
Users table with a search field, sortable user and last active columns, role and status badges and a result count that is announced to screen readers.
Style Two
Team directory inside a card, with a department filter, avatar and job title cells, a location column, a row action menu and an invite button.
Style Three
Customers table where the columns are declared in one array. Click any header to sort, with right aligned numbers and currency, search by name or country and totals in the footer.
Style Four
Invoices table with status tabs and counts, color coded status badges, overdue due dates in red, a download action and an outstanding balance footer.
Style Five
Transactions grouped by day. Each day gets a header row with its net total, every row has a category icon and credits are shown in green, with search and a pending badge.
Style Six
API request log in a monospace table. HTTP methods and status codes are color coded, a small bar shows latency and a toggle group filters by method.
Style Seven
Inventory table with product thumbnails, SKUs, a stock progress bar, in stock, low stock and out of stock badges and an alert that counts the products to reorder.
Style Eight
Compact striped table for reports. Dense rows, zebra striping, tabular numbers, change indicators with trend icons and a totals row.
Data Table - Expandable
Table blocks for richer layouts: expandable detail rows, grouped rows with subtotals, a master detail split, sticky headers and columns, and loading, empty and error states.
Data Table - Selection
Table blocks for acting on rows: a bulk action bar with select all, row action menus, click to edit cells, inline status selects, select all across pages with a running total and delete confirmation.