Hyper-Table plugin, sortable, very fast, beautiful, and configuable dynamic table widgets

[linonetwo]

Doc site: 高维表格 — 美观高效地展示大量数据，为你的条目生成数据透视表等高级表格展示方式。
Github: https://github.com/tiddly-gittly/hyper-table
CPL: Plugin_202405082237098

Doc site is bilingual, you can switch to en-GB. Thanks to feat: t macro and docs by linonetwo · Pull Request #7821 · Jermolene/TiddlyWiki5 · GitHub

Basic table

It is very fast, rendered using JS canvas API. And adapt to mobile, shows scrollbar when width is not enough (this is what I want, and why I create this plugin today).

You can also drag to change column width, click on title to sort if you config it properly.

You will need to read the options manual to config it https://visactor.io/vtable/option/ListTable
Or copy the examples on my doc site. I will also provide some prefab so you can use them directly.

This is very simillar to the usage of ECharts - Bringing amazing visualization tools to TiddlyWiki!, they are both a thin wrapper around a JS library, and accept that library’s options as widget parameter. So it’s powerful but maybe hard to get in hand.

Prepare data with filter

This is from $:/plugins/linonetwo/hyper-table/ParametersTable tiddler of doc site.

<$basic-table
  filter="[all[shadows]prefix[$:/plugins/linonetwo/hyper-table/language/zh-Hans/Parameters/]tag[BasicTable]]"
  columns=<<columns>>
  options="{ defaultRowHeight: 60 }"
/>

Pivot table

This is too advanced, that I don’t even know how to config and use it… But time will tell it is useful!

[TW_Tones]

@linonetwo this looks quite powerful and promising. It looks as if that data preparation is however not pure tiddlywiki. Perhaps we need other tools to go from a set of data represented in tiddlers and fields, and/or JSON to the appropriate formatting to make this tool accessible to more users?

[linonetwo]

Maybe I will provide some prebuild config as json tiddler, and user can directly transclude the tiddler to the options param.

Data preparation can be done using filter param, see paramTable example, it filter tiddlers with a prefix, to build the paramTable.

Doc site is bilingual, you can switch to en-GB.

[linonetwo]

Update a simple usage

<$basic-table
  filter="[all[shadows]tag[$:/tags/EditorToolbar]]"
  columns="title|caption|description|icon|condition|shortcuts"
/>

See the doc site for live examples.

[linonetwo]

ITKG plugin is now depending on this, mobile experience and rendering speed is much better than native HTML table.

[linonetwo]

V1.0.0 release, because upgraded underlying @visactor/vtable to v1.2.0, and add tags rendering.

You cal dblclick tag pill to open it now:

[Mohammad]

Hyper-Table is very powerful and customizable.
It takes TW one level up in processing/presenting data in tabular form.

Is it possible to reduce the size? I assume the JS modules are already minimized.

[linonetwo]

I think it works like echarts, all features that may be used in config JSON, are packed together. So it is not possible to make it smaller. But I will ask them about it 如何减小大小 · VisActor/VTable · Discussion #1877 · GitHub

[john.edw_gmail.com]

Using <$basic-table> is it possible to have columns populated with a transcluded image tiddler rather than text?

wikitable example

[linonetwo]

Curently not, you can add the feature in GitHub - tiddly-gittly/hyper-table: Present large amounts of data beautifully and efficiently, generate pivot tables and other advanced table presentations for tiddlers.