Mat Table Sort Multiple Columns

Look at the table headers you will header a sort arrow on each on mouse hover.

Mat table sort multiple columns. Sorting data in material table. After that in mat table we add following templates for header and row cell. We want to add the sorting functionality to our table and for that purpose we are going to use the matsort directive on the table tag. You can see an example i made in stackblitz.

This tutorial is about angular 5 data table here we will be creating a single page angular application from cli command and then integrate material with it and create a sample data table using mattablemodule and mat table directive the data table will support pagination sorting filtering and row selection provided by matpaginator and matsort in matpaginatormodule and matsortmodule. Sorting by signal name in descending order is indicated with a downward arrow next to the column header name. I am assuming that all required attributes are used and correct mat sort mat table datasource matcolumndef mat sort header etc i have a simple component with two sortable tables i omitted the irrelevant code for brevity. Mat header cell with matheadercelldef contains the text for column header.

B sortrows a column sorts a based on the columns specified in the vector column for example sortrows a 4 sorts the rows of a in ascending order based on the elements in the fourth column sortrows a 4 6 first sorts the rows of a based on the elements in the fourth column then based on the elements in the sixth column to break ties. Upon sorting the arrow icon reverses direction. Now we should have a better styled table. In this last point i am going to show you how to filter your mat table.

To reverse the sort order of a column a user taps the header name or arrow icon. Mat cell having object key of data passed as variable in matcelldef. Besides the matsort directive we are also adding a couple of extra auxiliary sort related directives to the mat table component. You have to add a header to displaycolumns for the multi select column and when you running over them using ngfor you have to check using ngif whether you are in the first header which belongs to the multi select column or in the other headers which belongs to the dynamic columns and create the header and column respectively.

In this picture i sorted employee name and you can an arrow on this column as well. The ng container is to define column definition having matcolumndef value which must be unique for a column. After banging my head against the wall for several hours i finally managed to make this work. In this case we will make only one column in the table sortable the seqno column.