Table

The table shows several fields simultaneously, where the content of each row is logically connected.

It can consist of multiple dimensions and measures and uses pages and pagination to efficiently load data and allow for quick navigation in large datasets.

table example
// Configure nucleus
const nuked = window.stardust.embed(app, {
  context: {
    theme: 'light', // default is light
    language: 'en-US', //default is en-US
    keyboardNavigation: false, // tell Nebula to handle navigation, default is false
    constraints: {
        active: false, // allow interactions, default is false
    },
  },
  types: [
    {
      name: 'table',
      load: () => Promise.resolve(window['sn-table']),
    },
  ],
});
// Rendering a table
nuked.render({
  type: 'table',
  element: document.querySelector('.table'),
  fields: ['Alpha', 'Dim1', '=Sum(Expression1)'],
  },
});

More examples

You can customize the look of the table. Here are some basic examples.

Styling

Colors and font sizes can be applied to the table, both for the header and the body, including the hover effect on rows.

table example with styling
nuked.render({
  type: "table",
  element: document.querySelector(".table"),
  fields: ["Dim1", "=Sum(Expression1)"],
  properties: {
    components: [
      {
        key: "theme",
        content: {
          fontSize: 20,
          fontColor: {
            index: -1,
            color: "#276e27",
          },
          hoverEffect: true,
          hoverColor: {
            index: -1,
            color: "#7db8da",
          },
          hoverFontColor: {
            index: -1,
            color: "#4477aa",
          },
        },
        header: {
          fontSize: 16,
          fontColor: {
            index: -1,
            color: "#f8981d",
          },
        },
      },
    ],
  },
});

Column Styling

Background and font coloring can be applied to a specific column. This is done by expressions, thus the color can vary depending on the value of the cell.

In order to change properties on a measure, the measure itself needs to be defined under properties on qDef.qDef and then the column colors on qAttributeExpressions.

table example with column styling
nuked.render({
  type: "table",
  element: document.querySelector(".table"),
  fields: ["Dim1"],
  properties: {
    qHyperCubeDef: {
      qMeasures: [
        {
          qDef: {
            qDef: "Sum(Expression1)",
          },
          qAttributeExpressions: [
            {
              qExpression: `=if(Sum(Expression1) < 100000, '#ff0000', '#00ff00')`,
              qAttribute: true,
              id: "cellBackgroundColor",
            },
            {
              qExpression: `=if(Sum(Expression1) < 100000, '#ffffff', '#000000')`,
              qAttribute: true,
              id: "cellForegroundColor",
            },
          ],
        },
      ],
    },
  },
});

Text alignment

For each column, the text alignment can be set. Default is left for dimensions and right for measures.

This example has a left-aligned measure.

table example with adjusted text alignment
nuked.render({
  type: "table",
  element: document.querySelector(".table"),
  fields: ["Dim1"],
  properties: {
    qHyperCubeDef: {
      qMeasures: [
        {
          qDef: {
            qDef: "Sum(Expression1)",
            textAlign: {
              auto: false,
              align: "left",
            },
          },
        },
      ],
    },
  },
});

Writing Direction

The default table direction is left-to-right. The writing direction can be flipped.

This example has a right-to-left table writing direction.

table example with right-to-left writing direction
nuked.render({
  element: document.querySelector(".object"),
  type: "table",
  fields: ["Dim1", "=Sum(Expression1)"],
  options: {
    direction: "rtl",
  },
});

Keyboard Navigation

All the interactions you can do with the mouse (selections, sorting, paging) are also supported through keyboard navigation.

When mounting the sn-table, there are two modes you can choose by setting the property keyboardNavigation either to true or false (default).

True tells nebula to handle focusing in and out of the table and false to make the first cell of the table to be focusable in sequential keyboard navigation. (See more about the stardust useKeyboard hook here.)

This is an example of navigating the table with keyboardNavigation: true.

The entire table can be focused, then space/enter is pressed to focus inside the table.

const n = embed(enigmaApp, {
  context: {
    keyboardNavigation: true,
  },
  // ...
});

n.render({
  type: 'table',
  element: document.querySelector('.table'),
  fields: ['Dim1', '=Avg(Num)'],
  },
});

And here is one with keyboardNavigation: false.

The first cell of table can be focused, so you tab straight into the table and then pagination controls.

const n = embed(enigmaApp, {
  context: {
    keyboardNavigation: false,
  },
  // ...
});

n.render({
  type: 'table',
  element: document.querySelector('.table'),
  fields: ['Dim1', '=Avg(Num)'],
  },
});

Keyboard commands

These are the available commands while inside the table. They differ depending on where you are on the chart and which mode you are in.

Keyboard commandOn table headerOn table BodyOn pagination controlsIn Selections mode on body
Arrow keysMove focusMove focus-Move focus
SpaceSort on columnSelect cell and enter selection modeActivate controlSelect/deselect cell
EnterSort on column-Activate controlConfirm selections
TabGo to pagination controlsGo to pagination controlsGo to next controlGo to pagination controls
Shift + tabBlur and focus the wrapping element*Blur and focus the wrapping element*Go to previous control or back to tableGo to selection toolbar
Ctrl/cmd + shift + left/right arrowGo to previous/next pageGo to previous/next pageGo to previous/next pageGo to previous/next page
EscapeBlur and focus the wrapping element*Blur and focus the wrapping element*-Cancel selections

*Only work when keyboardNavigation: true is set in context.

API

Nebula Table
Was this page helpful?