Slate Table Widget: set selectedRowKeys property

Ask the Community
1

For the Slate table widget, I have pagination enabled. I want to create a checkbox to select every row on the page.

Ideal behaviour: (1) user may select one or two rows on a page, then (2) if they choose to, select all rows on the page by toggling a checkbox.

Overriding selectedRowKeys on the Slate Table widget config creates circular dependencies, and doesn’t allow user to do (1).

Any ideas?

2

If you create a checkbox via the html widget, or a button widget, you can create events on click. You could indeed overwrite selectedRowKeys on the Slate Table widget config with a variable holding the state, e.g. called v_selection, and:

  • update v_selection when the checkbox/button is clicked
  • update v_selection when a selection is made, e.g. on selectedRowKeys.changed event.
    You may also need to handle the “selected page” state as updating the selected rows may some times redirect you to page 1.

This could yield a complex setup across functions, events and variables. A cleaner approach may be to use the Code Sandbox widget to create a custom table where you handle the selection logic.

3

thank you for the suggestions! do you have any tips on how we can handle the selected page not to reset to 1?

4

You can add a currentOffset field to v_selection , e.g.

v_selection = {
  "selectedRowKeys": [],
  "currentOffset": 0
}

and update it when a selection is made or when the checkbox/button to select all items on the page is clicked.

You can then set the currentOffset field in the raw widget json to
"{{v_selection.currentOffset}}"

Here is an example widget json

{
  "clickEvents": [],
  "columnData": "{{f_data}}",
  "columnOptions": {
    "key": {},
    "value": {}
  },
  "columnOrder": [
    "key",
    "value"
  ],
  "gridOptions": {
    "enableSelection": true,
    "pagingOptions": {
      "currentOffset": "{{v_selection.currentOffset}}",
      "pageSize": 2
    },
    "selectionOptions": {
      "checkbox": true,
      "multiSelect": true,
      "selectionRequired": false
    }
  },
  "selectedRowKeys": "{{v_selection.keys}}",
  "selectionIdentityColumnId": "key",
  "serverEnabled": false,
  "tooltipsEnabled": false
}
5

For example, if your table widget is called w_table with key column called key and your button is w_select_all, you can set the following event-action pairs:

  1. w.table.selectedRowKeys.changed → v_selection.set
const currentlySelectedKeys = {{slEventValue}}

return {
    "keys": currentlySelectedKeys,
    "currentOffset": {{w_table.gridOptions.pagingOptions.currentOffset}}
}
  1. w_select_all.click → v_selection.set
const currentOffset = {{w_table.gridOptions.pagingOptions.currentOffset}}
const pageSize = {{w_table.gridOptions.pagingOptions.pageSize}}
const all_keys = {{w_table.columnData.key}}
const all_keys_on_page = all_keys.slice(currentOffset, currentOffset + pageSize)


return {
    "keys": updatedKeys,
    "currentOffset": {{w_table.gridOptions.pagingOptions.currentOffset}}
}

Note that when changing the page, the selection state will not change and you will have to handle that case separately, if needed.

6

Thank you for the very detailed explanations! Would it be possible to have the currentOffset exposed to Slate. Currently, it’s not possible to access it