Open martinhonza opened 1 year ago
m4theushw
commented
1 year ago Adding this extra row while having pinned columns won't work because, even if it spans all columns, the container of the pinned columns has overflow: hidden which will cut the content. Did you try providing a custom footer component?
martinhonza
commented
1 year ago Okay, we already talked about this and I guess just having the row outside of pinned columns could be fine. What you suggests wouldn't work because it needs to be a row that can be anywhere in the table, you can Drag n Drop it, select it, focus it etc.. I will add note to the example that it isn't just last row because from the example it can be confusing.
Order ID 💳
54652
Duplicates
Latest version
The problem in depth 🔍
Hi,
so I am currently trying to solve a problem where we need to add text row which will span over the whole DataGrid. The best solution I could come up with was to put an extra column to the beginning of the dataGrid and stretch it with colspan prop. I was able to hid the header but the problem was that there would always be empty columns rendered for the rows that are not of the type text that I need. Do you have any suggestion how to implement this ? As I understand that dataGrid works on the basis of columns, so this may be tricky. There is also possibility to make custom Row, but I think it would be rather difficult to put all the functionality back, such as focus, select, edit, DnD etc... Also because of the structure of the DataGrid I believe that its not possible to stretch the column through whole DataGrid when there are PinnedColumns, is that right ?
Here is quick example that I was able to do in codesandbox that implements the extra column at the beginning. The text row can be anywhere in the table, not just on the bottom of the table and should behave as all other rows. https://codesandbox.io/s/mui-x-text-over-whole-row-cr5n1v?file=/src/App.tsx
Your environment 🌎
`npx @mui/envinfo`
``` System: OS: macOS 13.0.1 Binaries: Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node Yarn: 1.22.17 - ~/.npm-global/bin/yarn npm: 8.19.1 - ~/.nvm/versions/node/v14.18.2/bin/npm Browsers: Chrome: 107.0.5304.110 Edge: Not Found Firefox: 103.0.2 Safari: 16.1 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.104 @mui/core-downloads-tracker: 5.10.12 @mui/icons-material: ^5.10.9 => 5.10.9 @mui/lab: ^5.0.0-alpha.106 => 5.0.0-alpha.106 @mui/material: ^5.10.12 => 5.10.12 @mui/private-theming: 5.10.9 @mui/styled-engine: 5.10.8 @mui/system: ^5.10.12 => 5.10.12 @mui/types: 7.2.0 @mui/utils: ^5.10.9 => 5.10.9 @mui/x-data-grid: ^5.17.9 => 5.17.9 @mui/x-data-grid-generator: ^5.17.9 => 5.17.9 @mui/x-data-grid-premium: 5.17.9 @mui/x-data-grid-pro: ^5.17.9 => 5.17.9 @mui/x-date-pickers: ^5.0.6 => 5.0.6 @mui/x-license-pro: 5.17.0 @types/react: ^18.0.24 => 18.0.24 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.6 => 5.3.6 typescript: ^4.8.4 => 4.8.4 ```