material-react-table hide Select Column

Question

I have a question as I can't seem to find anything in the documentation pertaining to hiding set columns within material-react-table.

import { useMemo, useState } from "react";
import { MaterialReactTable } from "material-react-table";
import { Box, Badge, Snackbar, Alert } from "@mui/material";
import { updateDeviceByID } from "data/sensors";

const SensorTable = ({ deviceData, setDeviceData, setSelectedDevice }) => {
  const [openSaveAlert, setOpenSaveAlert] = useState(false);
  const [rowSelection, setRowSelection] = useState({});

  const columns = useMemo(
    () => [
      {
        id: "sensors",
        header: "Sensors",
        columns: [
          {
            accessorKey: "name",
            header: "Device Name",
          },
          {
            accessorKey: "description",
            header: "Description",
          },
          {
            accessorKey: "brand",
            header: "Brand",
            enableEditing: false,
          },
          {
            accessorFn: (row) => `${row.coordinates.longitude}`,
            id: "coordinates lng",
            header: "Coordinates Longitute",
          },
          {
            accessorFn: (row) => `${row.coordinates.latitude}`,
            id: "coordinates lat",
            header: "Coordinates Latitude",
          },
          {
            accessorFn: (row) => `${row.status}`,
            id: "status",
            header: "Status",
            size: 100,
            enableEditing: false,
            Cell: ({ row }) => (
              <Box sx={{ display: "flex", alignItems: "center" }}>
                <Badge
                  style={{
                    backgroundColor: row.original.status,
                    width: "20px",
                    height: "20px",
                    borderRadius: "50%",
                  }}
                  overlap="circular"
                  badgeContent=" "
                ></Badge>
              </Box>
            ),
          },
        ],
      },
    ],
    []
  );

  const handleSaveRow = async ({ exitEditingMode, row, values }) => {
    let newDeviceData = JSON.parse(JSON.stringify(deviceData));

    let update = {};

    for (let i = 0; i < newDeviceData.length; i++) {
      if (newDeviceData[i].device_id === row.original.device_id) {
        newDeviceData[i].device_id = row.original.device_id;
        newDeviceData[i].name = values?.name;
        newDeviceData[i].description = values.description;
        newDeviceData[i].brand = values.brand;
        newDeviceData[i].status = row.original.status;
        newDeviceData[i].coordinates = {
          longitude: parseFloat(values["coordinates lng"]),
          latitude: parseFloat(values["coordinates lat"]),
        };
        update = {
          name: values.name,
          description: values.description,
          coords: {
            lng: parseFloat(values["coordinates lng"]),
            lat: parseFloat(values["coordinates lat"]),
          },
        };
      }
    }

    updateDeviceByID(row.original.device_id, update).then((data) => {
      setOpenSaveAlert(true);
    });
    setDeviceData(newDeviceData);
    exitEditingMode();
  };

  const handleSaveDialogClose = () => {
    setOpenSaveAlert(false);
  };

  if (!deviceData) return null;

  return (
    <>
      <Snackbar
        open={openSaveAlert}
        autoHideDuration={4000}
        onClose={handleSaveDialogClose}
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
      >
        <Alert onClose={handleSaveDialogClose} severity="success">
          Saved succesfully
        </Alert>
      </Snackbar>
      <MaterialReactTable
        columns={columns}
        data={deviceData}
        // positionToolbarAlertBanner="bottom"
        editingMode="modal"
        enableEditing
        enableColumnActions={false}
        enableColumnFilters={false}
        enableSorting={false}
        enableTopToolbar={false}
        onEditingRowSave={handleSaveRow}
        enableRowActions
        onRowSelectionChange={setRowSelection} //connect internal row selection state to your own
        state={{ rowSelection }} //pass our managed row selection state to the table to use
        enableMultiRowSelection={false} //use radio buttons instead of checkboxes
        enableRowSelection
        muiTableBodyCellProps={({ row, cell, table }) => ({
          
          onClick: (event) => {
            console.log(row.original.device_id);
            setSelectedDevice(row.original.device_id);
            
          },
        })}
        muiTableBodyRowProps={({ row }) => ({
          //add onClick to row to select upon clicking anywhere in the row
          onClick: row.getToggleSelectedHandler(),
          sx: { cursor: 'pointer'},
        })}
  
        initialState={{
          columnVisibility: {
            mrtSelectRow: false,
            brand: false,
            description: false,
            "coordinates lat": false,
            "coordinates lng": false,
          },
          
        }}
      />
    </>
  );
};

export default SensorTable;

I have tried doing it via the initialState, but it doesn't work. I will want to be able to select the row, but I don't want the select header to show up with the radio button.

Any feedback would be super :)

enter image description here

Answer 1

I figured it out :) You just had to add this:

initialState={{
          columnVisibility: {
            mrtSelectRow: false,
            brand: false,
            description: false,
            "coordinates lat": false,
            "coordinates lng": false,
            "mrt-row-select": false,
          },