TreeGrid and JsonBasedTreeGrid Example Private

This is a demo of the two tree grids of ui-components, showing the files of antilia-widgets itself with their kinds, sizes and the days they were changed, the folder frontend expanded.

• Above, TreeGrid: a tree grid of Wicket components, a TableTree of wicket-extensions whose tree column renders the nodes of Tree, with the icons of ui-components. The other columns are ordinary columns of a DataTable; expanding a folder repaints the table through Ajax
• Below, JsonBasedTreeGrid: a JsonBasedTree shown as a WAI-ARIA treegrid, a single component whose rows are rendered in the browser from JSON. The tree column renders the template of the node, each other column a template of its own from the same JSON; the children of a folder follow its row, loaded the first time it is expanded
• The drop-down above them chooses whether the user can resize the columns of both by dragging the right edge of a header, and how: keeping the width of the table, a column taking its width from its neighbour (setResizableColumns(Mode.FIT)), or stretching the table as a column grows (Mode.STRETCH)
• Only files, the leaves, are selected: click the row of one, in either table, and it is shown on the right, repainted through Ajax by onSelect, its row marked as selected. A click on a folder expands or collapses it
• In JsonBasedTreeGrid, Tab moves to the rows; Up and Down move between them, Right and Left expand and collapse a folder or move to its first child and its parent, Home and End go to the first and the last row, and Enter or Space selects a file
• The headers, the kinds of files, the sizes and the days are written in the language of the session
• Both tree grids are private components: without a license key activating them they render a placeholder instead
• "Icons" above the trees chooses their icons: their own, the Font Awesome icons as inline SVG (SvgIcon), or the same drawn by the Font Awesome font (FontAwesomeIcon), given to the trees with setIcon(TreeIcon, IIcon). The arrows of the folders turn whatever icon they are; the React and Svelte tabs choose them the same way, through the icons of their trees

The React and Svelte tabs show the same files in the TreeGrid of @antilia/react and @antilia/svelte, with the same columns, loaded from the mounted resource /api/files; the file selected is shown by the app itself.