search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[docs] Improve Components/Slots customization for Datagrid #8226

Open dizzyjaguar opened 1 year ago

dizzyjaguar commented 1 year ago

Duplicates

Related page

https://mui.com/x/react-data-grid/components/

Kind of issue

Missing information

Issue description

I was looking for an easy explanation on how to provide a slot/component customization with the default state and props that the Datagrid is already providing to its components. I didn't find this clearly explained with the customization docs. Which then led me to dig into the code to see how certain components were implemented.

In my case it was just simply replacing the switches that are on the columnShowHidePanel with checkboxes. I later realized that if I just provided the component I wanted to use with props and spread them, it gave me the easy outcome I was looking for.

My Checkbox component, accepting and spreading the props from the default component. As well adding it to the component slot. 

function DataGridCheckbox(props: SwitchProps) {
  return <Checkbox color="marine" {...props} />
}

Anyways, I think this could be extremely helpful to explain in a simple manner somewhere in the documentation.

Context 🔦

Easier customization of component slots on the Datagrid with default props and state. In my case I was just looking to replace switches with checkboxes.

m4theushw commented 1 year ago

We definitely need to improve this page. The slot you used is not documented because it makes part of the slots used to inject the basic MUI components, e.g. Checkbox, TextField, Select.

dizzyjaguar commented 1 year ago

The slot you used is not documented because it makes part of the slots used to inject the basic MUI components, e.g. Checkbox, TextField, Select.

@m4theushw I'm not sure I understand, can you re-iterate.

m4theushw commented 1 year ago

The slots beginning with "base" in the file below are the building blocks of the grid. For instance, BaseCheckbox is used to replace the checkbox component used in all places that require a checkbox-like component (e.g. boolean column and row selection). Currently, these slots are set internally to contain components from MUI that implement the Material Design spec, however, in the future they will allow to use another set of base components, like those from Joy UI.

https://github.com/mui/mui-x/blob/884ebc023dd1b553842e9b2babbbd58f7314c036/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts#L8

dizzyjaguar commented 1 year ago

Gotcha, thanks for the clarification I appreciate it!