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
Related
Is it possible to achieve this, creating data grid with MUI v5 and rendering some kind of select or drop-down or input field, with which the name of the column will be changed dynamically, I've tried a lot of variants but in the end something gets buggy or the component breaks completely.
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?
I am new with react, and have been working with it using functional components only. I need to use draggable feature for table rows (To change the order of rows in a table by dragging them.)
Is there any (material ui is prefered) package for draggable table row like this http://clauderic.github.io/react-sortable-hoc/, but instead of list here, I need draggable table. Or is there any reliable version of draggable table for react
Also I found some others this and this. But both of them are using class and I am not able to understatnd how to convert them to functional components. Please Help.
In react js I need to get a design for up and down toggle arrow for sorting columns of a table
material-ui provides the tools for that.