Table with filters and sorting on Angular

This repository contains a ready-to-use table with filters and sorting from the trading app project written in Angular. There is a demo showing the light and dark themes of the table with some example data.

Demo:

Get Started

Prerequisites: Node.js and Angular must be installed.

1. Clone this project.
2. Open the terminal and navigate to the project root.
3. Run npm i (npm install) to install the necessary node modules.
4. Run ng s (ng serve) to start the application.
5. Open http://localhost:4200/ in your browser.

You will see the demo app containing two tables with example data. You can now test it or change some data in it. To use the table in your project, you will need to import the table component and use it as shown in the demo example. If you also would like to have the same font, you need to import the 'gully' folder from assets and register the font in your styles.css file like this:

@font-face {
  font-family: 'Gully';
  src: url('assets/fonts/gully/Gully-Regular.otf') format('opentype');
}

You can find the example usage of the table in the demo component. To change the data, insert your own in demo.component.ts (exact parameters are listed below). To change the table's theme, positioning, size, and so on, use demo.component.css and demo.component.html.

Table parameters

The table takes the following data as parameters:

• tableHeader - in the format [{ "value": "Name of the Column", "type": Type_Of_The_Data_In_The_Column }, { ... }, ... ]; The types are listed in filter-type.enum and can be:
  • Number - Slider as a filter is shown
  • Decimal - Slider with decimal values as a filter is shown
  • Text - Search field as a filter is shown
  • Date - Dropdown with "All periods", "Today", "Yesterday", "This week", "This month", "This year" values as a filter is shown
  • Object - List with checkboxes is shown as a filter representing any unique value in the column
• tableData - in the format [["value for column", "...", ...], [...], ...]. This is an array of arrays, each inner array representing a row in the table, and the values in it should match the header structure provided in tableHeader. See demo for an example usage. If no data is provided, the message 'Not yet available.' will be shown instead of the table. You can change this message using the errorEmpty parameter.
• [optional] errorEmpty - The message shown if no tableData is provided. The default is 'Not yet available.', but it can be changed to any value.
• [optional] name - The title of the table shown at the top left of the table. By default, it is not shown, but it can be added.
• [optional] theme - Specifies the theme to use. Can have values light, dark and red. The default is light. Adding a custom theme is described in the "Adding the Theme" section.

Customizing the table

This section explains how to further customize the table, including changing the filters used with specified filter types, names, and keys of the sortings. Any changes made will affect all table instances generated with this component.

The configuration of the table is specified in the file table-config.const.ts. It is an array of objects, each containing its own filter type. Filter types are listed in filter-type.enum.ts. Each filter type has sortings and filters:

• Sortings contain:
  • name: Can be anything.
  • key: Currently "asc" (ascending) and "desc" (descending) are implemented, but more may be added.
  • icon: Currently only the values "ArrowUp" and "ArrowDown" are used, but additional icons can be added in the future.
• Filters contain:
  • name: The name that will be shown near the filter.
  • type: Currently, "Dropdown", "Textfield", "Slider", and "Checkbox" are implemented.
  • For Dropdown-type, Options and DefaultSelected parameters are mandatory. Currently, the dropdown is implemented for time periods, but further implementations can be added.
  • For Textfield, Slider, and Checkbox-types, no further specifications are needed as the values are calculated from the data given in the column.

Adding the theme

Currently, three themes are implemented: light, dark, and red. To add more themes, follow these steps:

1. Navigate to table/theme-colors.ts and add the colors for the new theme in hex format.
2. Navigate to table.component.ts and add the theme name to the input parameter theme like this: @Input() theme: 'light' | 'dark' | 'new-theme-name' = 'light';
3. Add the theme with the same name to the range-slider (link) and custom-dropdown (link) using the same steps.
4. Now specify the theme when using the table like this: <app-table ... [theme]="'new-theme-name'"></app-table>

Here is a video explanation on how to add a new theme:

Further used elements - dropdown and slider

There are also some standalone elements that can work independently from the table:

• Custom Dropdown - developed to extend the functionality of the standard dropdown. Key points to take into account: the maximum height of the dropdown is 40% of the screen; if this height is exceeded, a scrollbar is shown. Additionally, the dropdown usually opens downwards, but if there is no space below, it will open upwards.
• Range Slider - a slider with two handles to represent a range. It can also be used separately from the table.