We are using Material UI and using <MUIDataTable> To display table.
We have multiple row as table header which is were we have to do colspan 2-3 columns also.
Looking for, How to customise table header column in a way that we can have multiple row as header.
I am new to React and Material UI, any hint or suggestions will also helpful.
Might help others...
Using customHeadRender we can customize table header column.
Here is example.
I used two div in on column and added line between these div.
Limitations: In my case sorting and searching on these(customized header) column are not required so no need to write logic for this but after customisation need to think about these functionality provide my MUi-datatable.
Related
How could I implement an add row functionality for MUI's Table, sg like in MS Word, when you hover over a row and on the side a little plus icon appears and you can insert a row in that position?
I would also have to somehow connect it to react-hook-form's fieldarray.
I was wondering if it's even possible to add such a feature for MUI or it would be wiser to create it from the ground up using native html tags.
I have created a Table using react-data-table-component and now I would like to make the table rows expandable such that when I expand a row it displays details specific to that row.
I read the react-data-table-component API documentation and its possible to have expandable rows by setting expandableRows to true and assigning a component to expandableRowsComponent. But how can I pass data to expandableRowsComponent such that if I expand row 1 I get data lets say "This is row 1", for row 2 I'll get "This is row 2" and so on...
Any help or guidance would be much appreciated. Thanks!
Go through the detailed documentation here https://react-data-table-component.netlify.app/?path=/docs/expandable-basic--basic
You will find all the details property which are using for collapse table components and all other helpful props and types with Typescript.
See in link there is good example as well for collapse table that will help you to make your collapse components.
In HTML, if I want a table element to span multiple columns, I can use the colSpan attribute to state how wide the column should be.
I am creating a React Native application with table view and need to duplicate this functionality. Are there any existing React Native table components which have a similar colSpan function?
You can use https://www.npmjs.com/package/react-native-table-component
Check out Example 3 in the docs and notice how flexArr prop is used to give relative size to column number 2 with respect to other columns.
You could also just use basic flexbox concepts to achieve a table like looking layout yourself https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx
I am looking for a full feature(like editing,deleting,inserting,group by on columns,pagination and extra) data grid for reactjs.
after searching i have found react-bootstrap-table (http://allenfang.github.io/react-bootstrap-table/index.html) its has all of the features that i want except group by on columns. is there any other react data grid or any body knows how can i add group by in react-bootstrap-table?
You can use
https://facebook.github.io/fixed-data-table/
It has support of grouped column
https://facebook.github.io/fixed-data-table/api-columngroup-v0.5.html
This is a bit of a general question into the possibilities of ui grid. I have had tremendous success with ui grid thus far. Now I have a use case where I want to switch the rows and columns of the grid.
Basically, I would like the headers to be displayed 'vertically' in the first column and to have the rows become columns.
Is this possible with ui grid?
As far as i know UI-grid doesn't support this. I doubt if you can do that. May be try building ColumnsDef and Data dynamically and pass it to gridOptions. Or else add extra column and this should be the first column where you will pass all the header values. Change the background of the cells to look like header cells. Now add second column where you pass the entire first row values. Hide the original header row completely. see now u got your required grid........ :)