Chapter 34 of 34

Finale: when GuiExpert Table – and when not

A checklist for your own table and an honest list of what is not built in.

After this chapter you can

  • plan a table step by step
  • know the strengths
  • know when to pick something else

Checklist for your table

  1. Choose the model – Array<T> → TableFactory.createTableModel() with rows (chapter 12 (Array<T> → model)), rows of values (chapter 14 (Array of arrays)), an own AreaModel for millions of rows or server data (chapter 17 (Own AreaModel)), a tree (chapter 30 (Tree table)).
  2. Columns – ColumnDef for label, width and alignment (chapter 13 (ColumnDef)), fixed columns in the model (chapter 18 (Fixed columns)).
  3. Header and footer – groups (chapter 15 (Header groups)), totals of the visible rows (chapter 16 (Footer totals)).
  4. Options – { ...new TableOptions(), … } (chapter 19 (TableOptions)), selection (chapter 22 (Selection & copy)), remembered state (chapter 33 (Persist state)).
  5. Tame the data – sorting (chapter 20 (Sorting)), filtering (chapter 21 (Filtering)), copy (chapter 22 (Selection & copy)), Excel (chapter 24 (Excel export)).
  6. Looks – renderers (chapter 25 (Cell renderers)), components (chapter 26 (Components as cells)), heatmap (chapter 27 (Heatmap)), theme (chapter 28 (Theming & dark mode)), spans (chapter 29 (Rowspan & colspan)).
  7. Interaction – events and context menu (chapter 23 (Events & context menu)), editing (chapter 31 (Inline editing)), live data (chapter 32 (Live data)).

Everything together

One table with almost every chapter of this training: renderers, footer totals, a fixed ID column, own options, range selection, live search, sorting, context menu, Excel, inline editing, brand theme and remembered state.

Live All chapters in one table
Screenshot: All chapters in one table Screenshot: All chapters in one table
Search, sort (double-click a header), drag to select, right-click, double-click a quantity, export.

A good fit

  • Large data sets in the browser: virtual scrolling vertically and horizontally, millions of rows.
  • One core for every framework: Angular 14–22, React, Vue 3, Svelte 4/5, Solid, Preact, Web Component, plain JS.
  • Full control over HTML and CSS, no runtime dependencies, MIT-licensed – free, also commercially.

Honestly: choose something else if …

Where to go from here

API used in this chapter