`Grid` Widget

[nexushoratio]

• [x] #189

Having decided against w2ui, time to set forth some requirements for a new grid widget:

• [x] #190
• [ ] Use ARIA roles
  • [ ] Grid
  • [ ] Table
• [x] rowClasses function that takes record and returns a list of CSS classes used to style a row
• [x] Columns are explicitly defined via methods
  • [x] title human readable name of the column
  • [x] field of the data records for this column
  • [x] render() function that takes record and returns Widget
  • [x] Move renderFunc out of config, like we use for Grid.rowClasses()
  • [x] Move title to a setter, and make field a regular parameter
  • [x] Must have field
  • [x] CSS support
  • [x] classList - Default should include field as a class (should end up on td, not widget)
• [x] Use live data, so this class does not need to worry about adding/removing records
• [x] Access to columns
• [x] build()
• [x] Move rows into thead/tbody elements

More features can be added as needed

[nexushoratio]

Using w2ui seems to work with minimal effort. At least first demo from the site works.

// @require     https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.min.js
// @resource    bob https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.min.css
// @grant GM.getResourceUrl

  const link = document.createElement('link');
  link.href = await GM.getResourceUrl('bob');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  document.head.append(link);

  const info = new NH.widget.Info('Popup');
  info.container.style = 'width: 65%; height: 95%;';
  document.body.prepend(info.container);

  // Widget configuration
  const config = {
... w2ui demo data ...
  };

  const layout = new w2layout(config.layout);
  const sidebar = new w2sidebar(config.sidebar);
  const grid1 = new w2grid(config.grid1);
  const grid2 = new w2grid(config.grid2);
  // Initialization
  layout.render(`#${info.container.id}`);
  layout.html('left', sidebar);
  layout.html('main', grid1);
  info.open();