@vendasta/va-filter2-table v5.10.0

Tables and all the things around them

import { Filter2TableModule } from '@vendasta/va-filter2-table';

This library is a very declarative way to define tables, making it easy to add a new tables with all the features.

Why use this table

1. Declaratively abstracts the definition of the table data from the implementation of the table
   1. This allows us to update the and improve the table without the developer having to change any specific table.
2. Less copy and paste. For example if you change one columns identifier can be done in one place. And not have to copy and paste from typescript file to html template.
3. Built in consistent styling.
4. Built in pagination.
5. Built in filters.
6. Customization where you need it.
   1. Column cells components
   2. Columns header components
7. Integrated features.
   1. Column organizer with preset views.
      1. There are two styles of column organizers, the advanced version is useful when there are more then 10 columns.
   2. Multi-column sorting.
   3. Export to CSV.
   4. Multi-page row selection.
   5. Pinned columns, meaning they are sticky to the left or right side of the table, and can't be horizontally scrolled off the screen.

8. Built in solution for internationalization (I18N) of all the strings used in the table.

How to Implement this Table

The demo-app has a simple implementation of this table, which you should use as a reference. Here are some of the key things to get right: 1. Provide the TableDefinition. The table definition describes what the table is in terms of each column, whether you can export to csv, which column organizer to use, how to compare rows for selecting rows, etc... More is described in the va-model-driven-mat-table. 1. You have to use a factory to link the factory service to the table definition. The filter service is based off va-filter2. 1. You must provide an implementation of TableDataService for your table. 1. The load request basically takes the current page, filter and sort parameters and returns an observable list of the results. 1. The total requests ideally returns the actual number of results, but many older implementations of paged results cannot fulfill this request, so the pattern has become show a number larger then the current result until you have paged to the last page.

Selecting rows across multiple pages

You can now select rows across pages if you provide a function to test the equality of 2 rows.

Export modal configuration

You can override the content displayed in the "Download" modal by specifying the exportDialogDefinition. If it's not specified, the default looks like what is shown in this table. See the Sales Order Table Component (in the Galaxy monorepo) for an overridden example (Click the download button).

Exporting All Rows in the table

The table accepts a new exportAllDataService field which is a service that will need to implement the ExportToCSVService interface, which simply requires that the service provide a exportAllRowsToCSV method that will fetch, format and download the rows you wish to export when the Export All Rows option is selected on the table.

Note:

This changes the behaviour of the toggle in the header of the table. It will add all rows on the current page to any existing selection of rows (it will not duplicate if a row on the current page is already selected), and deselect ALL selected rows if every row on the current page is selected.

If there are multiple rows considered equal by this function, selecting one will cause all other equivalent rows to appear as selected.

Future

We have received requests for the following features, please contact Craig Kumick if you are adding these features for further context.

• Footer row with totals, or other custom component.
• Integrated date range selector, that also highlights columns affected by date range selection.
• Current row selected action. For example we want selection of an individual row to output to its parent an event with the selected row information. This would allow us to open a side panel with the relevant information, or highlight the row on a map.
• Use filter chips to display and enter filters.