Simple web component for displaying tabular data.

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.

If you also need pagination functionality, take a look at the NNM Pagination table web component.

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

• Sorting the rows.
• Formatting and aligning content in the cells. Text to the left, numbers to the right, boolean with visual indicators.

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. You can also define an optional width and an optional cellEnhancer. In TypeScript:

    type PropertyType = "text" | "number" | "boolean" | "enum";
    
    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;
    };

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:

• Align the property values in the cells.
  • Text values are as default left aligned.
  • Number values are as default right aligned.
  • Boolean values are as default center aligned.
• Formatting the property values in the cells.
  • Boolean values are as default displayed with an icon if true, and left out if false.

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

• Playground and details about the nnm-simple-table web component.
• The NNM Pagination table web component.
• The NNM Local date range picker web component.
• Table.

Disclaimer

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