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.
// 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.
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.
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.
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.
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 command | On table header | On table Body | On pagination controls | In Selections mode on body |
|---|---|---|---|---|
| Arrow keys | Move focus | Move focus | - | Move focus |
| Space | Sort on column | Select cell and enter selection mode | Activate control | Select/deselect cell |
| Enter | Sort on column | - | Activate control | Confirm selections |
| Tab | Go to pagination controls | Go to pagination controls | Go to next control | Go to pagination controls |
| Shift + tab | Blur and focus the wrapping element* | Blur and focus the wrapping element* | Go to previous control or back to table | Go to selection toolbar |
| Ctrl/cmd + shift + left/right arrow | Go to previous/next page | Go to previous/next page | Go to previous/next page | Go to previous/next page |
| Escape | Blur and focus the wrapping element* | Blur and focus the wrapping element* | - | Cancel selections |
*Only work when keyboardNavigation: true is set in context.
