Qlik Design Blog

[Yianni_Ververis]

In my previous articles I talked about Nebula.js and the use with the existing extensions on major frameworks like React, Svelte and Angular.

Since the last one, a new extension was added, sn-table. Here is how to use it.

First install it

npm install @nebula.js/sn-table

Then import it and add it into your configuration

import table from '@nebula.js/sn-table';

...
      {
        name: 'table',
        load: () => Promise.resolve(table),
      },
...

If you have issues, you can view the entire configuration at https://observablehq.com/@yianni-ververis/nebula-js

Then, start adding dimensions and measures.

n.render({
    element: chartElement,
      type: 'table',
      properties: {
        qHyperCubeDef: {
          qDimensions: [
            { qDef: { qFieldDefs: ['Case Owner Group'] }, qNullSuppression: true, qLabel: 'Department' },
            { qDef: { qFieldDefs: ['Priority'] }, qNullSuppression: true },
          ],
          qMeasures: [
            { qDef: { qDef: 'Avg([Case Duration Time])', autoSort: false }, qSortBy: { qSortByNumeric: -1 }, qLabel: 'Avg Duration' },
          ],
          qInterColumnSortOrder: [2, 0, 1],
          qInitialDataFetch: [{
            qWidth: 3,
            qHeight: 3000,
          }],
        },
        showTitles: true,
        title: 'Table',
        subtitle: 'Sample supernova table',
        footnote: '',
        totals: {
          show: true,
        },
      },
  });

You should have something like this

View the entire example here
https://observablehq.com/@yianni-ververis/nebula-js

https://observablehq.com/@yianni-ververis/nebula-js-table

Happy coding!

/Yianni