@guiexpert/table is the framework-free core of the GuiExpert Table: virtual scrolling in both directions,
millions of rows, zero runtime dependencies, MIT-licensed. The framework packages (Angular, React, Vue,
Svelte, Solid, Preact, Web Component) are thin wrappers around exactly this API.
New here? The training explains everything step by step – 39 short
chapters with live demos. Every chapter links back to the classes on this site.
import "@guiexpert/table/css/main.css" ; import { EventAdapter , SimpleDomService , TableFactory , TableOptions , TableScope } from "@guiexpert/table" ; const host = document . querySelector < HTMLDivElement >( ".table-div" )!; // needs a height! const tableModel = TableFactory . createTableModel ({ rows: orders }); const tableScope = new TableScope ( host , tableModel , new SimpleDomService (), new TableOptions (), new EventAdapter ()); tableScope . firstInit (); const tableApi = tableScope . getApi ();
Copy
You want to …
Look at
Training
create and control a table
TableScope , TableApi
First table
turn data into a model
TableFactory , CreateTableModelPara
Array<T> → model
define columns
ColumnDef , ColumnDefIf , Size
ColumnDef
write an own header, body or footer
AreaModel , AreaModelIf
Own AreaModel , Footer totals
configure behaviour and look
TableOptions , TableOptionsIf
TableOptions
sort and filter
TableApi.sortByColumn , TableOptionsIf.externalFilterFunction
Sorting , Filtering
react to clicks, selection, edits
EventAdapter , EventListenerIf , GeMouseEvent
Events
select and copy
SelectionModel , TableApi.copyToClipboard
Selection & copy
export to Excel
TableApi.downloadExcel , ExcelService
Excel export
style cells
CellRendererIf , GeCssColorUtil
Renderers , Heatmap
show a tree
TreeFactory , TreeRow
Tree table
group flat rows with totals
RowGroupFactory , AreaModelRowGroups , TableApi.setRowGroupBy
Row grouping
pivot rows × columns with totals
PivotFactory , AreaModelPivot , pivotRows , TableApi.setPivotConfig
Pivot tables
update cells live
TableApi.updateCells , TableCellUpdateEvent
Live data
remember layout, sorting, scroll position, selection
AutoRestoreOptions , TableApi.getState , TableApi.applyState
Persist state
Twelve features, all MIT-licensed – overview with code and live demos: gui.expert/whats-new .
Feature
Start here
Since
Training
Screen readers & keyboard (WAI-ARIA grid)
TableOptionsIf.ariaLabelledBy , AriaTextsIf , TableApi.announce
1.1.91
Accessibility
“Loading…” and “No rows” overlays
TableApi.showLoadingOverlay , OverlayOptionsIf
1.1.92
Live data
Save & restore the state
TableApi.getState , TableStateIf , EventListenerIf.onStateChanged
1.1.92
Persist state
Row numbers
CreateTableModelPara.rowNumbersVisible , RowNumberColumnDef
1.1.93
Fixed columns
Total rows, sum of the selection
CreateTableModelPara.footerAggregates , Aggregators , TableApi.getSelectionAggregates
1.1.94
Footer totals
Row grouping
RowGroupFactory , TableApi.setRowGroupBy
1.1.94
Row grouping
Pivot tables
PivotFactory , TableApi.setPivotConfig
1.1.94
Pivot tables
Calculated columns, “Show values as”, formulas
ColumnDefIf.valueGetter , ColumnDefIf.showValuesAs , compileFormula , TableApi.setColumnFormula
1.1.95
Formulas
Drag rows into order
CreateTableModelPara.rowDrag , GeRowDragEvent , TableApi.moveRows
1.1.95
Events
Fill handle & batch edit
TableOptionsIf.fillHandle , TableOptionsIf.batchEdit , TableApi.commitBatchEdit
1.1.96
Inline editing
Master/detail
TableOptionsIf.masterDetail , DetailRenderContextIf
1.1.97
Master/detail
Right-to-left
TableOptionsIf.direction , TableApi.getDirection
1.1.98
Theming
The index is grouped by topic: Table & API , Table model , Area models , Columns , Options ,
Header groups , Tree & checkboxes , Renderers & editing , Events , Selection & focus ,
Sorting & filtering , Export & clipboard , Styling , Keyboard , Accessibility , Overlays , State ,
Row numbers , Aggregation , Row grouping , Pivot , Calculated columns & formulas , Row drag ,
Fill handle & batch edit , Master/detail , DOM , CRUD , Utilities –
and Internals for the classes the table uses itself.
Package
Use
@guiexpert/table
the core – this API
@guiexpert/angular-table@NN
Angular 14–22 (major = Angular major)
@guiexpert/react-table, @guiexpert/preact-table, @guiexpert/solid-table
callback props tableReady, mouseClicked …
@guiexpert/vue3-table
Vue events @tableReady, @mouseClicked …
@guiexpert/svelte-table
Svelte 4 and 5
@guiexpert/webcomponent-table
<guiexpert-table> for any page
Source code: github.com/guiexperttable/mono ·
Showcases: gui.expert/showcase · What's new: gui.expert/whats-new · Licence: MIT