Grid Widget

[nexushoratio]

• Investigate w2ui #189

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

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