Selection

Checkbox

The checkboxes are displayed by default in Add, Edit and Group mode. You can hide same with the property hideCheckbox.

<VirtualTable config={{ hideCheckbox: true }} />

Default selection

Use the defaultSelectedRows prop to init the selection state.

<VirtualTable defaultSelectedRows={[5]} />

Controlled selection

Use the selectRows api method to change the selected rows.

const apiRef = useRef();

return (
  <div>
    <button
      onClick={() => apiRef.current.selectRows([5])}
    >
      Select 5th
    </button>
    <VirtualTable
      ref={apiRef}
    />
  </div>
);

Event

When the selection state is updated, the selectedRows callback is called with the new selection value.

<VirtualTable
  selectRows={(ids) => console.log('New selection !', ids)}
/>

apiRef

See how to link the apiRef to use these methods.

Name	Type	Description
getSelectedRows	() => number[]	Returns the selection state.
selectRows	(ids: number[]) => void	Change the selection state.