av-grid — examples

Each file is standalone, has no build step of its own, and is small enough to read whole and copy in full.

Two things first. Run npm run build once — the examples load ../dist/av-grid.js, which is a build artifact and is not checked in. And open them through a server, not off the filesystem: browsers block ES module imports over file://.

npx serve .  or  python -m http.server, then open examples/.
  1. Minimal

    rows and nothing else. Columns, labels, widths, data types and row keys all inferred.

  2. Columns

    Explicit widths (pixels and percent), alignment, dataType, displayFormat, a computed column, a hidden one.

  3. Cell rendering

    A render hook returning markup, a header renderer, onCellClass, and a button handled through onCellClick.

  4. Sorting and filtering

    Header sorting, the funnel popover, the filter-chip bar, free-text search, and filters that persist across a reload.

  5. Selection and keyboard

    Row selection by checkbox and a cell range by drag or shift — two different things at once — plus full keyboard navigation.

  6. Editing

    Click-to-edit with the caret where you clicked, a dropdown column, a boolean checkbox, validate, and an onEdit that can veto.

  7. Clipboard

    Excel-compatible copy in four modes, cut, and paste — from the keyboard and from the API.

  8. Theming

    Live token editing and a dark theme, with a paint counter proving the re-tint costs zero paints.

  9. 100,000-row benchmark

    First paint, paint cost at the top against row 99,000, and the flat-cost ratio those two produce.

  10. Customization

    All seven host hooks in one file: status colours from cellClass, an overdue row from rowClass, a date-picker editor, a date-range filter, a copyValue on a rendered column, and a priority sortValue.

  11. Persephone board · README

    The grid on a board, themed entirely by the --p-* contract — with no theming code at all. Read the README: a board has to be scaffolded with create_board to be trusted.

The full API reference is docs/api.md.