CODEWITHSUNDEEP
reactjsmaterial-ui
Sean Liu
Sean Liu

Reputation: 1783

How to modify material UI datagrid checkbox icon?

Here is the codesandbox. I want to use my customized checkbox in the Datagrid. So I would like to change the first column checkbox to a round checkbox. I already have the wrapper round checkbox I want to use, but I do not know how to replace the default checkbox in datagrid. It looks like I should use slots Checkbox, but did not write it correctly,

https://codesandbox.io/s/datatable-material-demo-with-different-checkbox-mo715?file=/demo.js enter image description here

Upvotes: 8

Views: 11489

Answers (3)

dev404
dev404

Reputation: 1098

For those on version 5, here's what I used to modify the icons.

I am using FontAwesome, but you could replace the icon with anything else that may work inside IconButton.

const checkedIcon = (
  <IconButton>
    <FontAwesomeIcon icon={faSquareCheck} />
  </IconButton>
)

const unCheckedIcon = (
  <IconButton>
    <FontAwesomeIcon icon={faSquare} />
  </IconButton>
)


return (
   <DataGrid
      rows={rows}
      columns={columns}
      pageSize={5}
      rowsPerPageOptions={[5]}
      checkboxSelection
      components={{
        BaseCheckbox: (props) => (
          <Checkbox {...props} checkedIcon={checkedIcon} icon={unCheckedIcon} />
        ),
      }}
    />
)

Tested on MUI v5.17.12.

Upvotes: 0

Martin Wood
Martin Wood

Reputation: 51

if you're still wondering about this, or anybody else who wants to do this, I checked your example code and made a fork here with the solution:

https://codesandbox.io/s/datatable-material-demo-with-different-checkbox-forked-n1cnz0?file=/demo.js

Basically, the component should be passed in to BaseCheckbox and the custom checkbox needs to pass the props through.

Screenshot

Upvotes: 5

DCTID
DCTID

Reputation: 1337

You need to use the slots api to override components in the Material UI DataGrid library.

You should include the code in your question so others can benefit. You have this:

export default function DataTable() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <Checkbox />
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

Which just renders a round <Checkbox/> from your library above the <DataGrid/>. If you instead pass the <Checkbox/> to the component prop it will use that instead.

export default function DataTable() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        components={{
          Checkbox: Checkbox,
        }}
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

Upvotes: 7

Related Questions