Another simple web component for displaying tabular data.

Note: Documentation written by Anders Gustafson, revised .

Background

Displaying tabular data on the web should always be a simple process, also when you want to use pagination. 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-pagination-table web component.

This web component enhances the nnm-simple-table web component, with some convenient functionality. Recommended to read the basic documentation about the NNM Simple table first.

Some (additional) functionality you should get out-of-the-box:

• Deciding number of rows per page yourself.

Key functionality

A pretty looking HTML pagination table should be displayed. That is it!

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

The rows

The same as in the NNM Simple table, so the type for the rows is RowItem[].

The columns

If you want to have a nice user experience, the columns in a pagination table need to have fixed widths.

So, for each column you define the label, the property name and the property type. You should also define the optional width. You can also define an optional cellEnhancer. In TypeScript:

    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[] (which is the same as in the NNM Simple table).

Number of rows per page

This should be configurable by the user, and preferable the user should be able to select any positive integer value.

Resetting to first page

I think that the most intuitive solution is to reset to first page of the table in the following scenarios:

• When sorting on a column. Every time the user sorts, even if reversing the current sorting, reset the display to first page.
• When changing number of rows per page, otherwise it may be hard to understand which page you actually should show, and the user may be confused.

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-pagination-table web component.
• The NNM Simple 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.