Qlik Community

Ask a Question

Qlik Design Blog

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

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

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.

    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


Happy coding!