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
Related
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.
I'm trying to create this functionality in React Tables:
This functionality has been created for another table that is not using useFilters. But now I want to use React useGlobalFilter functionality for this.
I followed this tutorial for that purpose, and now my tables are being correctly filtered using globalFilters.
But the highlight functionality is not working properly. My cell render receives an HTML like this:
<mark>Reg</mark>istered
so if I try to filter by: Registered, it will never work, as plain text contains <mark> HTML tags.
So I'm trying to combine both functionalities playing with Column filters based on dataSource instead of column value, but with no luck.
Note:
My render functionality accepts any component to render content. That's why I can draw HTML content inside.
I want my filter to search based on dataSource or a specific value I set
Any clues on how to get this?
React material ui DataGrid component. i don't want columns, just want to pass row's and render and show rows only. how can it be done?
hide true is not helping because it is not even rendering grid
please provide some alternative
If I understand correctly, you would like to show a DataGrid's rows but leave off the headers of the columns. It doesn't seem that MaterialUI provides an option for that directly, but you can achieve something like it by using the headerHeight prop (docs) and setting it to 0.
<DataGrid
rows={rows}
columns={columns}
headerHeight={0}
/>
You still do need to specify what the columns are (with the columns prop), so that MaterialUI knows how to render your rows given the raw data. If you don't need columns at all and really just want a list, you could try using the List component instead.
I Want to use material-table to setup table where the last row will be used to show the calculated total of one column. as per the material-table doc, I guess I can use Component Overriding in Cell or Row.
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