Table Selection

By default, selection is disabled. To add row selection capabilities to the table, there are two properties of the GoTableConfig that must be set, selectable and selectBy.


  class GoTableConfig {
    selectable: boolean; // defaults to false
    selectBy: string;
  }

selectable

This property enables selection within the table. Without this enabled, selection will not be possible.

selectBy

This property determines which column will be used to keep track of row selection. It corresponds to one of the fields in the columns. Typically, this should be an id, or some other unique identifier in the data set.

Selection is persistant. This means that if the user changes the page or sorts the data, previous selections will persist through these actions. This applies to both client side and server side implementations.

There are two ways to interact with the selected items of the table:

By binding to the table's selection event outputs (the subject of this card).
By using an element reference to the table (see the "Element Reference Interection" card below).

Binding to the table's selection events

There are two outputs that emit selection events from the table


  // Emits a `RowSelectionEvent` event when an individual row is selected or deselected.
  @Output() rowSelectionEvent: EventEmitter<RowSelectionEvent> = new EventEmitter<RowSelectionEvent>();
  // Emits a `SelectionState` event when all rows are selected or deselected via the select-all checkbox.
  @Output() selectAllEvent: EventEmitter<SelectionState> = new EventEmitter<SelectionState>();

The interfaces for the RowSelectionEvent and the SelectionState provide more information about the structure of these events:


  export interface RowSelectionEvent extends SelectionState {
    /**
     * The current row that was targeted for selection
     */
    currentRow: {
      /**
       * The entire data in the row
       */
      data: object;
      /**
       * Whether or not this row was selected (`true`) or deselected (`false`)
       */
      selected: boolean;
    };
  }

  export interface SelectionState {
    /**
     * The current deselected rows; if `selectionMode` is `selection` then this will always be an empty array
     */
    deselectedRows?: any[];

    /**
     * Defines the current mode of selection. `selection` will add items to `selectedRows`
     * and `deselection` will add items to `deselectedRows`.
     *
     * If in `deselection` mode, the UI toggle all checkboxes to true. Items instead will be added to `deselectedRows`
     * because they're being removed from the selection.
     */
    selectionMode: SelectionMode;

    /**
     * The current selected rows; if `selectionMode` is `deselection` then this will always be an empty array
     */
    selectedRows?: any[];
  }

To summarize: in selection mode, the user is selecting individual rows. This means that these selected rows are being added to the selectedRows array. In deselection mode, the user has checked the 'check all' check box and is now removing items from the selection; we call this deselection. In this case, items are added to the deselectedRows array as the user unchecks them.

example.html


  <go-table
    [tableConfig]="tableConfig"
    (rowSelectionEvent)="tableRowEvent($event)"
    (selectAllEvent)="selectAllEvent($event)">
    <!-- Table rows markup --!>
  </go-table>

example.ts


  tableRowEvent(rowEvent: RowSelectionEvent): void {
    // Do something with the rowEvent
  }

  selectAllEvent(selectionState: SelectionState): void {
    // Do something with the selectionState
  }

Interact with the table below to see how the selection works.

Interactive Example of Selection States

ID	First Name	Last Name	Email	Gender	IP Address
1	Lydia	Greenholt	Christiana_Bailey60@yahoo.com	Female	48.193.30.210
2	Meta	Toy	Trevion_Kub90@hotmail.com	Male	71.253.27.67
3	Velma	Kirlin	Cara15@yahoo.com	Male	0.202.206.153
4	Vicenta	MacGyver	Ursula78@yahoo.com	Female	227.61.211.118
5	Ruthe	Kutch	Payton_Reinger61@gmail.com	Male	75.193.7.51
6	Zaria	Satterfield	Shaina21@gmail.com	Male	163.165.236.76
7	Lindsay	Witting	Forest.Hand20@hotmail.com	Female	179.154.10.77
8	Marshall	Gleason	Micaela66@hotmail.com	Male	107.187.159.175
9	Marianne	Bashirian	Mazie60@gmail.com	Male	39.146.144.216
10	Carmine	Blick	Matteo.Grimes56@gmail.com	Female	239.11.56.236

This approach should be used when an action is performed after a user has finished their selecting (ex. button click).

example.html


  <go-table
    [tableConfig]="eleRefTableConfig"
    tableTitle="Element Reference Example"
    [showTableActions]="true"
    #eleRefTable>
    <ng-container go-table-actions>
      <go-button (handleClick)="getSelectionState()">Selection State</go-button>
    </ng-container>
    <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 {
    GoTableComponent,
    GoTableConfig,
    SelectionState
  } from '@tangoe/goponents';

  eleRefTableConfig = new GoTableConfig({
    selectBy: 'id',
    selectable: true,
    tableData: [] // your array of data
  });

  @ViewChild('eleRefTable', { static: false }) eleRefTable: GoTableComponent;

  getSelectionState(): void {
    const state: SelectionState = this.eleRefTable.getSelectionState();

    // do something with the state
  }

Element Reference Example

ID	First Name	Last Name	Email	Gender	IP Address
1	Bart	Spinka	Kaitlin78@gmail.com	Female	252.82.82.118
2	Kailee	Bruen	Emory_McCullough@gmail.com	Male	51.105.21.67
3	Estella	Crona	Santina.Halvorson50@gmail.com	Male	44.193.187.247
4	Mercedes	Howell	Elaina_Botsford67@hotmail.com	Female	30.208.154.194
5	Jalen	Bernhard	Conor.Powlowski@gmail.com	Male	171.157.189.105
6	Lysanne	Towne	Michelle.Kunde32@gmail.com	Male	159.48.75.228
7	Meggie	Von	Bert93@gmail.com	Female	19.151.21.76
8	Elvera	Bednar	Kelli.Daniel14@hotmail.com	Male	90.240.56.63
9	Zoe	Ferry	Alena2@hotmail.com	Male	189.252.98.90
10	Ramon	Bradtke	Brad.Walker28@gmail.com	Female	226.69.80.142

This approach should be used when an action necessary upon individual row selection or deselection.

example.html


  <go-table
    [tableConfig]="rowEventTableConfig"
    tableTitle="Row Event Example"
    (rowSelectionEvent)="rowEventExample($event)">
    <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 {
    GoTableConfig,
    RowSelectionEvent,
    SelectionState
  } from '@tangoe/goponents';

  rowEventTableConfig = new GoTableConfig({
    selectBy: 'id',
    selectable: true,
    tableData: [] // your array of data
  });

  tableRowEvent(rowEvent: RowSelectionEvent): void {
    // do something with rowEvent
  }

Row Event Example

ID	First Name	Last Name	Email	Gender	IP Address
1	Emmanuel	Towne	Tania70@gmail.com	Female	69.101.42.110
2	Audrey	Feest	Fredy_Russel8@hotmail.com	Male	78.34.177.143
3	Felicia	Schumm	Kaden_Jast88@yahoo.com	Male	184.152.218.35
4	Carlie	Klein	Destiney.Stamm76@yahoo.com	Female	168.81.80.0
5	Scotty	Friesen	Euna79@gmail.com	Male	12.239.61.46
6	Alec	Huel	Nigel_Orn@gmail.com	Male	17.233.9.12
7	Stefanie	Altenwerth	Zetta_Abshire@hotmail.com	Female	173.212.231.56
8	Carolina	Lebsack	Elise.McGlynn@gmail.com	Male	29.152.150.31
9	Ottilie	Kshlerin	Tyrique.Rolfson@gmail.com	Male	54.189.56.156
10	Maximo	Moen	Javonte.Runte@gmail.com	Female	63.168.40.179

There may be times where you want all options in a table to be preselected and the user to start with deselecting options instead of selecting them. This can be accomplished through the preselected option in the GoTableConfig.

example.html


  <go-table
    class="go-column go-column--100"
    [tableConfig]="preselectedTableConfig"
    tableTitle="Preselect All Rows">
    <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 {
    GoTableConfig
  } from '@tangoe/goponents';

  preselectedTableConfig: GoTableConfig = new GoTableConfig({
    preselected: true,
    selectBy: 'id',
    selectable: true,
    tableData: [] // your array of data
  });

Preselect All Rows

ID	First Name	Last Name	Email	Gender	IP Address
1	Damaris	Herzog	Ora_Jacobi43@gmail.com	Female	5.244.2.184
2	Joanny	Bins	Tina.Mraz@hotmail.com	Male	30.214.149.150
3	Ross	Kertzmann	Evan27@hotmail.com	Male	237.7.11.165
4	Lempi	Koss	Lorine_Gerlach@gmail.com	Female	254.14.98.96
5	Reilly	Casper	Guido_Moen@yahoo.com	Male	33.64.66.233
6	Leon	Ledner	Bernhard37@yahoo.com	Male	9.129.178.24
7	Kory	Schinner	Sigurd_Ullrich42@yahoo.com	Female	110.105.4.137
8	Carroll	Dickinson	Damien_Davis@hotmail.com	Male	40.79.33.112
9	Tessie	Nienow	Marlene_Murray@gmail.com	Male	56.62.115.236
10	Lexus	Kunde	Maryam94@gmail.com	Female	40.27.151.189

Table Selection

Implementing Selection

selectable

selectBy

Imporant Notes

Interacting with the Selection

Binding to the table's selection events

example.html

example.ts

Interactive Example of Selection States

Element Reference Interaction

example.html

example.ts

Element Reference Example

Row Event Interaction

example.html

example.ts

Row Event Example

Preselect All Rows

example.html

example.ts

Preselect All Rows

Features