v4.1.0

This release introduces the new ui-react-dom module. This provides pre-built components for tabular display of your data in a web application.

New DOM Components

The following is the list of all the components released in v4.1:

Component	Purpose
ValuesInHtmlTable	Renders Values.	demo
TableInHtmlTable	Renders a Table.	demo
SortedTableInHtmlTable	Renders a sorted Table, with optional interactivity.	demo
SliceInHtmlTable	Renders a Slice from an Index.	demo
RelationshipInHtmlTable	Renders the local and remote Tables of a relationship	demo
ResultTableInHtmlTable	Renders a ResultTable.	demo
ResultSortedTableInHtmlTable	Renders a sorted ResultTable, with optional interactivity.	demo
EditableCellView	Renders a Cell and lets you change its type and value.	demo
EditableValueView	Renders a Value and lets you change its type and value.	demo

These pre-built components are showcased in the UI Components demos. Using them should be very familiar if you have used the more abstract ui-react module:

const App = ({ store }) => (
  <SortedTableInHtmlTable tableId='pets' cellId='species' store={store} />
);

const store = createStore().setTables({
  pets: {
    fido: { species: 'dog' },
    felix: { species: 'cat' },
  },
});
const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App store={store} />); // !act

console.log(app.innerHTML);
// ->
`
<table>
  <thead>
    <tr><th>Id</th><th class="sorted ascending">↑ species</th></tr>
  </thead>
  <tbody>
    <tr><th>felix</th><td>cat</td></tr>
    <tr><th>fido</th><td>dog</td></tr>
  </tbody>
</table>
`;

root.unmount(); // !act

The EditableCellView component and EditableValueView component are interactive input controls for updating Cell and Value content respectively. You can generally use them across your table views by adding the editable prop to your table component.

The new StoreInspector

The new StoreInspector component allows you to view, understand, and edit the content of a Store in a debug web environment. Try it out in most of the demos on the site, including the Movie Database demo, pictured. This requires a debug build of the new ui-react-dom module, which is now also included in the UMD distribution.

Also in this release, the getResultTableCellIds method and addResultTableCellIdsListener method have been added to the Queries object. The equivalent useResultTableCellIds hook and useResultTableCellIdsListener hook have also been added to ui-react module. A number of other minor React hooks have been added to support the components above.

Demos have been updated to demonstrate the ui-react-dom module and the StoreInspector component where appropriate.