Skip to content
Design System
العربية

Tables

import"@truvar-ai/design-system"

Tables

Tables are built on React Aria's Table, so keyboard navigation, selection, sorting and screen-reader announcements work the same in every one.

Simple table

Built on Table

Numbers align to the end and use tabular figures.

Company
Stage
Value
Nile FoodsNegotiationEGP 840,000
Delta FreightProposal sentEGP 1,250,000
Sinai RetailQualifiedEGP 460,000
Alex PharmaWonEGP 2,100,000

Sortable table

Built on Table + sortDescriptor

Click a header, or focus it and press Enter. The sort direction is announced.

Name
Company
Deal value
Last activity
HIHany Ibrahim
Alex PharmaEGP 2,100,0003 days ago
DADina Ashraf
Aswan SolarEGP 1,530,0002 days ago
TSTarek Saleh
Delta FreightEGP 1,250,000yesterday
RYRana Youssef
Cairo FintechEGP 975,000yesterday
NKNadia Kamel
Nile FoodsEGP 840,000today
YHYasmin Hosny
Mansoura DairyEGP 720,0006 days ago

Selection and bulk actions

Built on Table selectionMode=multiple

Shift-click selects a range. The bulk bar replaces the toolbar while rows are selected.

2 selected
Name
Stage
Owner
NKNadia Kamel
NegotiationAmira Hassan
TSTarek Saleh
Proposal sentOmar Farouk
MFMona Fathy
QualifiedLaila Mansour
HIHany Ibrahim
WonYoussef Nabil
SASalma Adel
New leadAmira Hassan

Resizable columns

Built on ResizableTableContainer + ColumnResizer

Drag the edge of a header, or focus it and use arrow keys.

Name
Email
Company
Phone
Nadia Kamelnadia@nilefoods.comNile Foods+20 100 234 5678
Tarek Salehtarek@deltafreight.comDelta Freight+20 122 410 9876
Mona Fathymona@sinairetail.comSinai Retail+20 111 777 0021
Hany Ibrahimhany@alexpharma.comAlex Pharma+20 109 552 3310

Expandable rows

Built on Tree

Hierarchical rows use React Aria's Tree. Right arrow expands, left collapses (mirrored in Arabic).

Greater Cairo
41EGP 9,200,000
SMB team
24EGP 3,100,000
Delta
9EGP 1,400,000

Drag to reorder

Built on Table + useDragAndDrop

Drag the handle, or focus it and press Enter, then arrows, then Enter to drop.

Task
Owner
Due
Call Delta Freight about renewalOmar Farouktoday
Send Nile Foods the pilot planAmira Hassantomorrow
Review Aswan Solar contractAmira Hassanin 2 days
Book demo with Cairo FintechLaila Mansourin 3 days

Totals row

Built on Table + TableFooter

Totals sit in a real table footer, so screen readers announce them as a summary rather than another row of data.

Owner
Deals
Won
Pipeline
AHAmira Hassan
30EGP 2,550,000
OFOmar Farouk
30EGP 1,965,000
LMLaila Mansour
31EGP 2,155,000
YNYoussef Nabil
31EGP 3,030,000
Total122EGP 9,700,000

Infinite scroll

Built on Table + TableLoadMoreItem

Rows load as you scroll, with a loading row at the bottom. Good for call logs that grow all day.

15 of 200 calls
Caller
Outcome
Duration
When
Nadia KamelMeeting booked1:00today
Ahmed SamirCall back10:13today
Mona FathyVoicemail5:26today
Mahmoud GaberNo answer14:39today
Salma AdelMeeting booked9:52today
Sherif LotfyCall back4:05today
Rana YoussefVoicemail13:18yesterday
Tarek SalehNo answer8:31yesterday
Dina AshrafMeeting booked3:44yesterday
Hany IbrahimCall back12:57yesterday
Yasmin HosnyVoicemail7:10yesterday
Karim MostafaNo answer2:23yesterday
Nadia KamelMeeting booked11:362 days ago
Ahmed SamirCall back6:492 days ago
Mona FathyVoicemail1:022 days ago

10,000 rows

Built on Virtualizer + TableLayout

Only the rows on screen exist in the page, so scrolling stays smooth at any size. Keyboard navigation and screen readers still know the full count.

Name

Loading and empty

Built on TableBody renderEmptyState

Deal
Stage
Value
Loading deals