add: wrapper table component to export it

[imbysho]

Related Issue

734

Description

Trying to create and export a wrapper table component to acces from outside and customize it.

Impacted Areas in Application

List general components of the application that this PR will affect:

* MTableWrapper --- new component material-table.js

[Domino987]

Hi 2 things: can you explain the reason for the PR and could you remove all changes that are prettier and not code related? Like what do you want to achieve that cannot be done right now: just add the sx parameter or what ?

[imbysho]

Hi 2 things: can you explain the reason for the PR and could you remove all changes that are prettier and not code related? Like what do you want to achieve that cannot be done right now: just add the sx parameter or what ?

This is related to de issue #734 This way I can add a custom Wrapper and modify there what I need.

If there is a way to achieve what I ask in the issue, That will be great.

[Domino987]

Yes I know, but what do you want to achieve and how do you do it? Can you share a Sandboy or something on what you are doing.

[imbysho]

Yes I know, but what do you want to achieve and how do you do it? Can you share a Sandboy or something on what you are doing.

Ideally we can have a prop that allow to group the th on the table.

I didnt know how to do that, so I expect to add a custom wrapper and in this wrapper insert after the table the groups of the th, doing some math to manage the width of each th.

I get the table columns with a fixedLayout and then if group A, have three cols, I sum the trhe width and insert in the custom component a new div with that div, and something like that. Is no ideal but I didnt find another way of doing this.

I really can use some help here to achive this #734

[Domino987]

So in the image you have an extra row with custom table cells for a second header? So you just want to add a custom row on top. Can you explain in words what you would like to get. I am still not clear. To avoid confusion, I don't ask how you would achieve it, but what you want to achieve on more detail than I want to wrap them please. The sentence " I want to group the th " is not accurate because you add a second th row. Which one etc.

[imbysho]

So in the image you have an extra row with custom table cells for a second header? So you just want to add a custom row on top. Can you explain in words what you would like to get. I am still not clear. To avoid confusion, I don't ask how you would achieve it, but what you want to achieve on more detail than I want to wrap them please. The sentence " I want to group the th " is not accurate because you add a second th row. Which one etc.

There are certain cases in complex tables in which it is necessary to group the columns in order to specify what that group of columns represents. For example, let's say we have a table that has the data of a company's services, customer data, supplier data, tax data, etc. What I would like is to be able to group the columns that represent the data of the service with another column called Services, those of the provider with a call Provider, etc. As depicted in the image I shared.

There are libraries that achieve this using a data structure like this:

`const columns: GridColDef[] = [ { field: 'id', headerName: 'ID', width: 90 }, { field: 'firstName', headerName: 'First name', width: 150, }, { field: 'lastName', headerName: 'Last name', width: 150, }, { field: 'age', headerName: 'Age', type: 'number', width: 110, }, ];

const columnGroupingModel: GridColumnGroupingModel = [ { groupId: 'Internal', description: '', children: [{ field: 'id' }], }, { groupId: 'Basic info', children: [ { groupId: 'Full name', children: [{ field: 'lastName' }, { field: 'firstName' }], }, { field: 'age' }, ], }, ];`

[Domino987]

Could we simply fix this by removing the div from the table wrapper and make it into a box and pass the given sx tag? And can you add a sandbox of how you achieve this, like what you pass?

[imbysho]

Could we simply fix this by removing the div from the table wrapper and make it into a box and pass the given sx tag? And can you add a sandbox of how you achieve this, like what you pass?

Idon't get how doing that we can achieve something like the post before. With the sx we can add styles but not insert code into the wrapper or am I missing something?

[Domino987]

The multi header row is not supported as of yet. Of you have a decent idea on how to implement it natively, that would be interesting. Bit just adding a random wrapper might not be the best idea here

[imbysho]

The multi header row is not supported as of yet. Of you have a decent idea on how to implement it natively, that would be interesting. Bit just adding a random wrapper might not be the best idea here

I guess so but any idea of how to achieve that? Do you have in mind to add this feature any time soon? I really need it for a production enviroment this will be a life saver.