bc-grid
GitHub

Basic grid

View source

10,000 client-side rows, virtualized rendering, default chrome. Most ERP grids start here and add features one at a time.

Order #
Customer
Status
Amount
Opened
Sales rep
R-000001
Customer 00001
active
$0.00
2024-01-01
Avery Chen
R-000002
Customer 00002
pending
$31.42
2024-08-14
Ben Singh
R-000003
Customer 00003
closed
$62.83
2024-03-27
Cara Diaz
R-000004
Customer 00004
active
$94.25
2024-10-13
Drew Lin
R-000005
Customer 00005
pending
$125.66
2024-05-26
Elena Park
R-000006
Customer 00006
closed
$157.08
2024-12-12
Felix Roy
R-000007
Customer 00007
active
$188.50
2024-07-25
Gita Bose
R-000008
Customer 00008
pending
$219.91
2024-02-11
Henry Kao
R-000009
Customer 00009
closed
$251.33
2024-09-24
Avery Chen
R-000010
Customer 00010
active
$282.74
2024-04-10
Ben Singh
R-000011
Customer 00011
pending
$314.16
2024-11-23
Cara Diaz
R-000012
Customer 00012
closed
$345.57
2024-06-09
Drew Lin
R-000013
Customer 00013
active
$376.99
2024-01-22
Elena Park
R-000014
Customer 00014
pending
$408.41
2024-08-08
Felix Roy
R-000015
Customer 00015
closed
$439.82
2024-03-21
Gita Bose

Try this

Every interaction below is built in — no opt-in flag.

  • Click the "Order #" header to sort.
  • Hold Shift and click another header to multi-sort.
  • Drag the right edge of a header to resize that column.
  • Click a cell, then Cmd+A to select all.
  • Drag across cells to make a range, then Cmd+C to copy as TSV.
  • Right-click any cell to open the default context menu.

What just happened

  • Virtualization. Only the rows in the viewport are mounted. Scroll past 10,000 rows and the DOM never grows.
  • Sort. Built into the header. Single click toggles, Shift-click adds a secondary sort.
  • Range selection. Drag across cells, hold Shift+arrow to extend, Cmd+A to select-all. The visual layer composes with the active cell and the focus ring.
  • Context menu. Right click for the default menu — Copy, Export, Toggle column visibility, etc. Custom items plug in via contextMenuItems.
  • Pinned column. Order # is pinned left so it never scrolls out of view.