START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
DocsLists & data
TableView source
1 min readTable renders plain tabular data; DataTable adds sorting, selection, row actions and a pending state.
1
using eQuantic.UI.Components;
DATATABLE
NUMBER
CLIENT
TOTAL
INV-014
Northwind
€ 2,400
INV-015
Contoso
€ 980
INV-016
Fabrikam
€ 1,150
Usage
1
2
3
4
5
6
7
8
9
10
new DataTable
{
Columns = [ new DataColumn("Number"), new DataColumn("Client"), new DataColumn("Total") ],
Rows = _invoices,
SortColumn = _sortCol,
SortDirection = _sortDir,
OnSort = c => SetState(() => Sort(c)),
Selection = _selected,
OnToggleRow = r => SetState(() => Toggle(r)),
}
API
Prop
Type
Default
Description
Columns
IReadOnlyList<DataColumn>
—
Header, alignment and format per column.
Rows
IReadOnlyList<DataRow>
—
The data.
SortColumn
int
-1
Index of the sorted column; -1 is unsorted.
SortDirection
SortDirection
None
Ascending, Descending or None.
OnSort
Action<int>?
null
Header press handler.
Selection
IReadOnlyCollection<string>?
null
Selected row keys.
OnToggleRow
Action<DataRow>?
null
Row checkbox handler.
OnToggleAll
Action?
null
Header checkbox handler.
OnRowPressed
Action<DataRow>?
null
Row activation.
PendingRows
int
0
Skeleton rows drawn while data loads.
Empty
VisualNode?
null
Shown when there are no rows — usually an EmptyState.
Table.Columns
IReadOnlyList<string>
—
Plain-table headers.
Table.Rows
IReadOnlyList<IReadOnlyList<string>>
—
Plain-table cells.
States
State
Rendering
Sorted
The header shows direction and announces it
Selected
Row tint plus a count in the toolbar
Pending
Skeleton rows at the real row height
Empty
The Empty node
Accessibility
•
Real table semantics with header association; sortable headers are buttons announcing the current direction.
When to use
•
Comparable records with more than two attributes.
Avoid
•
Tables on phones — collapse to a list of cards.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/DataTable.cs.