Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld Online 2021, May 10-12: Our Free, Virtual, Global Event REGISTER TODAY
Yianni_Ververis
Employee
Employee

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

Yianni_Ververis_0-1612440698450.png

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

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

Happy coding!

/Yianni