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.
Related
material-react-table offers out of the box UI component for choosing what columns to display, to set there order, pin the columns, etc. See the screenshot.
I would like to replace this UI component with a custom one. More specifically, I would like to open a drawer that has the same features as the out-of-the-box column menu. How to do that?
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.
I have one currency field named Full Fleet Potensial and i want display only this currency field only on left side column, middle column i need to display all detail field and right side i need to display activity.
I can't display only single field on right side column when i drag record detail component it has no filter to display only one field.
is there any way to display single field?
I try to create new layout and try to apply on right side column record detail component but it will change layout for middle record detail component also
Edit: dynamic forms work on standard objects from Winter'23 onwards.
https://admin.salesforce.com/blog/2022/learn-moar-in-winter-23-with-dynamic-forms-on-standard-objects
Not out of the box (yet).
The feature to drop single fields on lightning page layout is called "Dynamic Forms". But it works only for custom objects and Account is standard. Keep an eye on roadmap, next releases, maybe there's idea to upvote...
A developer can create aura or lightning web component with your field, then you'd drop it on that section of the page layout.
If you have VSCode, sfdx configured (bit of upfront investment to set it up but the result will be the bleeding endge of technology SF offers) - look into https://developer.salesforce.com/docs/component-library/bundle/lightning-record-view-form/documentation. If you don't - in a pinch you can work out of developer console to create Aura version of this component (click the button in upper right of that documentation).
This is also a cool working example if documentation is not your thing: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_load_record. Aura version is here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/data_service_load_record.htm
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?