NNM Simple table

Simple web component for displaying tabular data.

Example of NNM Simple table
Example of NNM Simple table (version 1.1.0).

Note: Documentation written by Anders Gustafson, revised .

Background

Displaying tabular data on the web should be a simple process. If you have a list of items in your JavaScript and want to display some properties from these items in a structured table, you can use this nnm-simple-table web component.

Some functionality you should get out-of-the-box:

Key functionality

When you have an array of objects, by configuring the properties you want to have columns for, a pretty looking HTML table should be displayed. That is it!

See the NNM Simple table web component page, for different examples of how easy it is to display a table with convenient functionality.

The rows

When you have an array of objects, the property values are of type PropertyValue. The objects are of type RowItem. In TypeScript:

    type PropertyValue = string | number | boolean | null | undefined;
    
    type RowItem = Record<string, PropertyValue>;

So the type for the rows is RowItem[].

The columns

You define which of the properties you want in the table, and in what order the properties should be displayed. For each column you define the label, the property name and the property type. In TypeScript:

    type PropertyType = "text" | "number" | "boolean" | "enum";
    
    type ColumnConfiguration = {
        label: string;
        propertyName: string;
        propertyType: PropertyType;
    };

So the type for the column configurations is ColumnConfiguration[].

Other functionality that I required

Secondary functionality that I aimed for in the first version.

Text aligning and formatting

Since we are defining a PropertyType for each column, we can use these types to easily:

Row numbering

Automatically displaying the row numbers is really valuable. It makes it much easier to refer to a specific row in the table. Especially if the rows lack explicit id fields, or if the id values are long and complex.

The total number of rows should also be displayed (at the top) for convenience.

Sorting

The rows can be sorted on any column, by clicking on the column headers.

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

Feedback

Feedback is always appreciated. If you have questions, suggestions for improvements, find errors, please see the contact details at information page.

References

Disclaimer

As always, delivered as is, with the best of intentions, but no guarantees.