How to use the selectable rows feature?

[sa-si-dev]

How to use the selectable rows feature?

[sa-si-dev]

To enable the selectable rows feature, add the properties showSelectableCol and selectedRowsActions

class GridComponent extends GridCoreComponent {
  constructor(options) {
    let defaultOptions = {
      showSelectableCol: true,
      selectedRowsActions: [
        { label: 'Delete', value: 'delete' },
        { label: 'Change Status', value: 'change_status' },
      ],
      // selectedRowsActions: ['Delete', 'Change Status'], /** if label and value are same */
    };

    super(Object.assign(defaultOptions, options));
  }
}

Override isRowSelectable method to disable the checkbox for rows that don't have permission

isRowSelectable(rowData) {
  /** return boolean value */
  return rowData.status !== 'deleted';
}

/** OR */

isRowSelectable(rowData) {
  let result = rowData.status !== 'deleted';

  /** return object with message, to show tooltip while hover on checkbox */
  if (!result) {
    result = {
      result,
      message: 'No permission',
    };
  }

  return result;
}

Override onSelectedRowsActionClick method to add listener for action button click event.

onSelectedRowsActionClick(e) {
  let action = DomUtils.getData(e.target, 'action');
  let selectedRows = this.getSelectedRows();

  alert(`Clicked action "${action}" for ${selectedRows.length} rows`);
}

[eugenefoxx]

Could you add some examples with html to build tables when using the plugin? Thanks)

[sa-si-dev]

@eugenefoxx thanks for asking.

For HTML code, you should add a div element with id attribute to initialize the plugin. (more details)

<!-- dom element to render the grid -->
<div id="sample-grid"></div>

[eugenefoxx]

I get an error following the example - Uncaught ReferenceError: sampleGridDetails is not defined at new SampleGrid

[sa-si-dev]

I get an error following the example - Uncaught ReferenceError: sampleGridDetails is not defined at new SampleGrid

You have to define the sampleGridDetails object with title and column details or hard-code the details in the SampleGrid class itself.

Refer grids-config.js for sampleGridDetails structure that I have used in the demo page.