Table Sorting

By default, sorting is enabled. To set the sorted column and direction, you may pass an GoTableSortConfig class to the sortConfig property on the GoTableConfig object.


  class GoTableSortConfig {
    column: string;
    direction?: SortDirection = SortDirection.ascending;
  }

column

This property determines which column to set as the default sort as a string. To sort a column in a nested object in the array, you may pass the path to the property. "address.state"

direction

This property determines the direction to sort the data. By default, it will sort ascending. This property is an enum, SortDirection (see below).


  enum SortDirection {
    ascending = 1,
    descending = 0
  }

example.html


  <go-table [tableConfig]="tableConfig">
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name"></go-table-column>
    <go-table-column field="name.last" title="Last Name"></go-table-column>
    <go-table-column field="email" title="Email"></go-table-column>
    <go-table-column field="gender" title="Gender"></go-table-column>
    <go-table-column field="ip_address" title="IP Address"></go-table-column>
  </go-table>

example.ts


  // import these at the top of the file
  import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents';

  this.tableConfig = new GoTableConfig({
    sortConfig: new GoTableSortConfig({
      column: 'name.first',
      direction: SortDirection.descending
    }),
    tableData: data
  });

Sort Example

ID	First Name	Last Name	Email	Gender	IP Address
6	Sonya	Johns	Shania.Ritchie@yahoo.com	Male	156.70.78.69
20	Savanah	Huels	Braulio6@hotmail.com	Male	184.64.55.6
14	Rogelio	Gerlach	Nasir82@gmail.com	Male	134.21.235.23
2	Nyasia	Graham	Larue_Roberts83@yahoo.com	Male	67.31.213.26
12	Michele	Grimes	Earlene_Stoltenberg@gmail.com	Male	108.127.40.15
13	Lorenzo	Boyle	Hershel95@gmail.com	Female	226.188.2.185
19	Lavern	Murazik	Amparo.Kulas@yahoo.com	Female	195.44.213.164
10	Kory	Boyle	Cordelia.Schmitt@gmail.com	Female	206.252.145.241
3	Hulda	Kertzmann	Sage_Herzog64@hotmail.com	Male	173.250.38.70
11	Herman	Rolfson	Nikolas_Pacocha@yahoo.com	Male	49.22.109.173

example.html


  <go-table [tableConfig]="tableConfig">
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name"></go-table-column>
    <go-table-column field="name.last" title="Last Name"></go-table-column>
    <go-table-column field="email" title="Email"></go-table-column>
    <go-table-column field="gender" title="Gender"></go-table-column>
    <go-table-column field="ip_address" title="IP Address"></go-table-column>
  </go-table>

example.ts


  // import these at the top of the file
  import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents';

  this.tableConfig = new GoTableConfig({
    sortable: false,
    tableData: data
  });

Restricting Sort

ID	First Name	Last Name	Email	Gender	IP Address
1	Cooper	Ullrich	Monte33@gmail.com	Female	97.122.220.117
2	Emery	Monahan	Litzy.OHara34@yahoo.com	Male	211.113.169.203
3	Demetrius	O'Reilly	Randal57@gmail.com	Male	140.21.194.44
4	Alexandra	McClure	Kiley84@hotmail.com	Female	215.148.20.20
5	Ellis	Herzog	Hollie33@yahoo.com	Male	131.222.8.161
6	Jarod	Berge	Bria_Nitzsche@yahoo.com	Male	203.209.240.133
7	Celestine	Lemke	Makenna_Kemmer77@gmail.com	Female	57.216.92.39
8	Audreanne	Miller	Tatyana_Witting@yahoo.com	Male	142.133.84.235
9	Roy	Morissette	Brycen80@hotmail.com	Male	152.239.211.93
10	Jasmin	Kemmer	Alvena_Veum@hotmail.com	Female	217.130.228.79

Sometimes we want a table to be sortable, but only want certain columns to be sortable. This can be done in one of two ways. We can either make the table sortable by default and then disable sorting on certain columns, or we can disable sorting by default on the table and enable it on a couple columns we want to be sortable.


  class GoTableSortConfig {
    column: string;
    direction?: SortDirection = SortDirection.ascending;
  }

sortable

This property exists on go-table-column and can be used to turn sorting on or off for a specific column.

example.html


  <go-table [tableConfig]="tableConfig">
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name"></go-table-column>
    <go-table-column field="name.last" title="Last Name"></go-table-column>
    <go-table-column field="email" title="Email" [sortable]="false"></go-table-column>
    <go-table-column field="gender" title="Gender" [sortable]="false"></go-table-column>
    <go-table-column field="ip_address" title="IP Address" [sortable]="false"></go-table-column>
  </go-table>

example.ts


  // import these at the top of the file
  import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents';

  this.tableConfig = new GoTableConfig({
    sortConfig: new GoTableSortConfig({
      column: 'name.first',
      direction: SortDirection.descending
    }),
    tableData: data
  });

Restricting Sort By Column

ID	First Name	Last Name	Email	Gender	IP Address
6	Sonya	Johns	Shania.Ritchie@yahoo.com	Male	156.70.78.69
20	Savanah	Huels	Braulio6@hotmail.com	Male	184.64.55.6
14	Rogelio	Gerlach	Nasir82@gmail.com	Male	134.21.235.23
2	Nyasia	Graham	Larue_Roberts83@yahoo.com	Male	67.31.213.26
12	Michele	Grimes	Earlene_Stoltenberg@gmail.com	Male	108.127.40.15
13	Lorenzo	Boyle	Hershel95@gmail.com	Female	226.188.2.185
19	Lavern	Murazik	Amparo.Kulas@yahoo.com	Female	195.44.213.164
10	Kory	Boyle	Cordelia.Schmitt@gmail.com	Female	206.252.145.241
3	Hulda	Kertzmann	Sage_Herzog64@hotmail.com	Male	173.250.38.70
11	Herman	Rolfson	Nikolas_Pacocha@yahoo.com	Male	49.22.109.173

example.html


  <go-table [tableConfig]="tableConfig">
    <go-table-column field="id" title="ID"></go-table-column>
    <go-table-column field="name.first" title="First Name" [sortable]="true"></go-table-column>
    <go-table-column field="name.last" title="Last Name" [sortable]="true"></go-table-column>
    <go-table-column field="email" title="Email"></go-table-column>
    <go-table-column field="gender" title="Gender"></go-table-column>
    <go-table-column field="ip_address" title="IP Address"></go-table-column>
  </go-table>

example.ts


  // import these at the top of the file
  import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents';

  this.tableConfig = new GoTableConfig({
    sortable: false,
    tableData: data
  });

Restricting Sort

ID	First Name	Last Name	Email	Gender	IP Address
1	Cooper	Ullrich	Monte33@gmail.com	Female	97.122.220.117
2	Emery	Monahan	Litzy.OHara34@yahoo.com	Male	211.113.169.203
3	Demetrius	O'Reilly	Randal57@gmail.com	Male	140.21.194.44
4	Alexandra	McClure	Kiley84@hotmail.com	Female	215.148.20.20
5	Ellis	Herzog	Hollie33@yahoo.com	Male	131.222.8.161
6	Jarod	Berge	Bria_Nitzsche@yahoo.com	Male	203.209.240.133
7	Celestine	Lemke	Makenna_Kemmer77@gmail.com	Female	57.216.92.39
8	Audreanne	Miller	Tatyana_Witting@yahoo.com	Male	142.133.84.235
9	Roy	Morissette	Brycen80@hotmail.com	Male	152.239.211.93
10	Jasmin	Kemmer	Alvena_Veum@hotmail.com	Female	217.130.228.79

Table Sorting

Implementing Sorting

column

direction

Setting the Sort

example.html

example.ts

Sort Example

Restricting Sort Example

example.html

example.ts

Restricting Sort

Restricting by Column

sortable

example.html

example.ts

Restricting Sort By Column

Enabling by Column

example.html

example.ts

Restricting Sort

Features