1. Examples
  2. Kitchen Sink

Examples

Kitchen Sink

A table with all plugins enabled, including:

  1. multi-sorting
  2. column and table filtering
  3. column re-ordering and hiding
  4. pagination
  5. row grouping and aggregation
  6. row expansion
  7. row selection
  8. column resizing
INFO

Source code available on the REPL.

Hidden columns

Pagination

1 of 50

Column order

Name (1000 records, 20 in page)
Info (1000 samples)
Summary
First Name
Last Name
Age
Status
Visits
to
Profile Progress
Milford Ledner, 18
59 / 100
Milford Ledner 18 single 10 59
Grace Botsford, 0
7 / 100
Grace Botsford 0 complicated 10 7
Mozelle Reynolds, 25
93 / 100
Mozelle Reynolds 25 complicated 20 93
Salvatore Heidenreich, 18
46 / 100
Salvatore Heidenreich 18 complicated 77 46
Francisco Cole, 13
45 / 100
Francisco Cole 13 complicated 4 45
Odessa Bayer, 11
95 / 100
Odessa Bayer 11 relationship 49 95
Eileen Pagac, 2
88 / 100
Eileen Pagac 2 relationship 32 88
Kassandra Purdy, 18
53 / 100
Kassandra Purdy 18 single 2 53
Wilhelmine Ledner, 4
61 / 100
Wilhelmine Ledner 4 relationship 8 61
Chadrick Sporer, 1
4 / 100
Chadrick Sporer 1 single 6 4
Alanna Vandervort, 10
93 / 100
Alanna Vandervort 10 relationship 39 93
Bryana Gleichner, 27
15 / 100
Bryana Gleichner 27 relationship 81 15
Tiana Veum, 27
29 / 100
Tiana Veum 27 complicated 5 29
Jocelyn Rau, 22
43 / 100
Jocelyn Rau 22 relationship 82 43
Aylin Wisozk, 5
31 / 100
Aylin Wisozk 5 single 99 31
Ephraim Ziemann, 24
83 / 100
Ephraim Ziemann 24 complicated 79 83
Pablo Bogan, 11
38 / 100
Pablo Bogan 11 complicated 30 38
Thea Gibson, 3
81 / 100
Thea Gibson 3 complicated 30 81
Jennyfer Satterfield, 21
37 / 100
Jennyfer Satterfield 21 complicated 59 37
Vicky Schaden, 11
34 / 100
Vicky Schaden 11 single 59 34
{
  "groupByIds": [],
  "sortKeys": [],
  "filterValues": {},
  "selectedDataIds": {
    "1": true
  },
  "columnIdOrder": [
    "selected",
    "expanded",
    "summary",
    "firstName",
    "lastName",
    "age",
    "status",
    "visits",
    "progress"
  ],
  "hiddenColumnIds": [],
  "expandedIds": {
    "1": true
  },
  "columnWidths": {
    "age": 100
  }
}