Simple table

Creates a table from an array of column configurations and an array of row items.

On the project page, NNM Simple table, you can read more details and the theory and background on the ideas and decisions.

Sortable rows

The rows can be sorted by clicking on the column headers. Current sorting column is indicated with different color and bars.

First click on a column header sorts ascending, second click sorts descending, and third click displays the original order.

Examples

Most of the examples are using the same fictive data for the rows (which you can see in the first example). Some examples use data from the real world.

All columns and rows from original data

All the unmodified original data, presented with all the columns.

Sliced portion of the rows and rearranged columns

From the original row data, a portion is sliced out (rows.slice(2, 7)).

Filtered all employees and rearranged and renamed columns

Only showing the employees. The first two columns are renamed.

Renamed columns and modified data

Created new information from the original data. Here we see that you easily can combine and create new properties to present things differently.

Tall table

Randomly created, that can be easily sorted (sort and see how the colors harmonize). Also utilizing the optional cell enhancer functionality.

Planets in the solar system

Real world data.

Dashboard

Utilizing the optional cell enhancer functionality.

Using cell enhancer functionality

Randomly created, that can be easily sorted (sort and see how the colors harmonize). Also utilizing the optional cell enhancer functionality for several columns.

Using cell enhancer functionality

Using the optional cell enhancer functionality, to display special content (in this case the nnm-timestamp-enhancer web component).

nnm-simple-table

Attributes

type

Optional. normal or striped. If set to striped, the table rows will be striped. Defaults to normal.

Properties

You need to set the arrays via properties, and not via attributes (Google Developers). So the column configuration and the rows must be set programmatically in JavaScript.

columnConfigurations

An array of ColumnConfiguration objects.

rowItems

An array of RowItem objects.

Types

The following TypeScript types are used within the component:

type PropertyType = "text" | "number" | "boolean" | "enum";

type PropertyValue = string | number | boolean | null | undefined;

type CellEnhancer = (cell: HTMLTableCellElement, value: PropertyValue, rowItem: RowItem) => void;

type ColumnConfiguration = {
    label: string;
    propertyName: string;
    propertyType: PropertyType;
    width?: string | null; // Highly needed when you have a pagination table.
    cellEnhancer?: CellEnhancer;
};

type RowItem = Record<string, PropertyValue>;

type SortingOrder = "asc" | "desc" | null;

The purpose of the cellEnhancer property is to make it easy to dynamically modify a cell depending on the actual cell content.

Code examples

The fifth example, the tall table with random integers, is created with the following TypeScript code:

const columnsFifthExample: ColumnConfiguration[] = [
    {
        label: "Id",
        propertyName: "id",
        propertyType: "number"
    },
    {
        label: "Random integer",
        propertyName: "randomInteger",
        propertyType: "number",
        cellEnhancer: (tableCellElement: HTMLTableCellElement, value: PropertyValue) => {

            const alpha = 0.4;
            const smallIndicatorColor = `rgba(255, 200, 200, ${alpha})`;
            const mediumIndicatorColor = `rgba(200, 255, 200, ${alpha})`;
            const largeIndicatorColor = `rgba(200, 200, 255, ${alpha})`;

            if (typeof value === "number") {
                const indicatorColor = value < 50 ? smallIndicatorColor :
                    value < 100 ? mediumIndicatorColor :
                        largeIndicatorColor;
                
                tableCellElement.setAttribute("style", `background-color: ${indicatorColor};`);
            }
        }
    },
];

const rowsRandom: RowItem[] = Array.from(Array(40).keys())
    .map((index: number) => {
        return {
            id: index + 1,
            randomInteger: Math.ceil(Math.random() * 120)
        }
    });

const fifthExample = document.querySelector("#fifth-example") as NnmSimpleTable;
if (fifthExample) {
    fifthExample.columnConfigurations = columnsFifthExample;
    fifthExample.rowItems = rowsRandom;
}

Note: The <nnm-simple-table> component was initially created in March 2022.