'How to get rid of MUI-Datatable "selected rows" panel on the top of a table

Does anyone know how to get rid of 'selected rows' panel on the top of a table when some rows are checked or to place the panel to the bottom as in default material ui data grid component? enter image description here

mui-datatable


Solution 1:[1]

You can use the following CSS selector to hide the selected rows toolbar:

.MUIDataTableToolbarSelect-root-89 {
/* visibility: hidden !important; */
display:none !important;
}

If you want to hide the row entirely (which I assume you do), you can use the display none !important line. Otherwise, you can use the commented out line of visibility: hidden.

Solution 2:[2]

You can change selectToolbarPlacement in the MUIDatatable options: 'none', 'above', 'replace'. By default it is 'replace'. As described here:

Controls the visibility of the Select Toolbar, options are 'replace' (select toolbar replaces default toolbar when a row is selected), 'above' (select toolbar will appear above default toolbar when a row is selected) and 'none' (select toolbar will never appear)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert
Solution 2 Sasha

Related Questions