Replace HandsOnTable with URTable

[benloh]

While HandsOnTable nicely provided the features we needed for a table, the library was problematic:

1. Non-commercial use was allowed, but the non-commercial authorization script was breaking Digital Ocean.
2. Click detection of rendered table cell buttons was broken on iOS. (It worked in Safari)
3. We want to minimize dependencies on other libraries.

So we are replacing HandsOnTable with our own custom URTable.

URTable was originally built for Net.Create. See Resizable table columns

New Features

Sort order icons

By default the table is unsorted.

• Clicking on a column header will sort the table by that column in ascending order
• Subsequent clicks will toggle to descending to unsorted and back to ascending
• The next sort order is highlighted on hover with a transparent arrow
• The column remembers the previous sort order when another column is selected
  so re-selecting the column will restore the previous sort order
• A column can be designated unsortable by setting sortDisabled to true

---

API

Documentation from the original PR for reference:

Table rendering is implemented via three layers of components:

• URTable.jsx -- the base component
• NCTable.jsx -- a decorator component that adds additional renderers and sorters
• NCNodeTable.jsx / NCEdgeTable.jsx -- the final custom component

URTable.jsx

At the core is a generic URTable.jsx component that provides a simple table component with sorting and column resizing. This can be used with ANY table.

NCTable.jsx

NCTable.jsx provides Net.Create-specific sorters and renderers. Specifically, support for handling markdown and hdate (historical date) data formats. NCTable.jsx provides the features common to both Node and Edge tables.

NCNodeTable.jsx/NCEdgeTable.jsx

NCNodeTable.jsx and NCEdgeTable.jsx defines the table data for nodes and edges, specifying:

• the table data format
• the column order
• any custom sorters
• any custom column renderers
• any custom click handlers (e.g. click to view/edit a node or edge, open a comment)

Table Data

Table data is defined as a simple JSON object table, e.g.:

[
  { id: 1, label: 'Constantinople', founding: '100 ce' },
  { id: 2, label: 'Athens', founding: '1000 bce' },
  { id: 3, label: 'Cairo', founding: '3000 bce' },
]

The table itself is defined via "Column definitions" that specify:

• the columns to be included
• a title for the column
• the data key to use
• width of the column (in pixels)
• type of data (e.g. number, text)
• any custom sorter
• any custom renderer

URTable can handle a number of built-in generic data types:

• numbers
• dates
• text

...along with some Net.Create-specific data types:

• markdown
• hdate (historical date)

Column Sorters

Columns can be sorted ascending and descending using standard types: number, text.
Depending on the data format, dates can be handled and sorted as strings (e.g. "October 1, 2023") or numbers (e.g. if using unix timestamps).

In addition, custom sorters can be defined for specific data types.

• markdown -- Sorts by raw markdown text, but displays rendered HTML (since sorting by html text is at best confusing).
• hdate -- Sorts by interpreted date, but displays raw hdate data (since we want to sort by the interpreted date while still showing what the user entered).

Column Renderers

Standard data types will display text as-is.

If the data requires special handling, you need to define a custom renderer. For example, you can use a custom renderer to show a button or an image based on the table data.

For example, table data { id: 0, url: 'http://www.inquirium.net' } you can use the url to render a clickable button.

To Do

• Show sort direction icons
• Fix date sorting
• Handle admin view:
  • "Move" and "Trash" functions
  • Fix "CLASSROOM:GROUP" sorting