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.
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.
The antd tables work well with Input components. I have been using the editable cell example at https://ant.design/components/table#components-table-demo-edit-cell and it works well with undo / redo functionality.
The Select / Options and Date Picker components however do not have any documentation in the context of a table that's hooked up to a state. I have gotten the Options / Date Picker to work but when implementing undo / redo logic, it looks like their state does not by default update like the Input fields. If you Google this, it is a tricky part of React in general to get these components to update automatically with state changes in a Form.
Is there an example of an antd table with select or date picker that's hooked up to state information?
I got the Select / Option to work correctly visually e.g. default states load correctly, depending on selection color changes etc. I can manipulate the data as needed. Similarly, got the Date Picker to work. However, where I am stuck is automatically tying state changes to update the components. I can probably do some crazy stuff like force render but before going that route wanted to check if there is a cleaner / better antd way of doing this.
I think you have to custom return to default Editable Cells like the following example url example
After wasting many hours on this, it looks like there is a bug in antd Forms. See this SO thread: React | Ant design select value not setting
In short, removed the Form.Item and everything works fine.
I'm working with MUI DataGrid, I need to render a custom calendar column. Everything seems to be working as expected, but... . the calendar picker is hidden by the table boundaries, this image illustrates better the situation.
I've been tried changing between different positions of the render element, but it does not work, please take a look on this code sandbox.
https://codesandbox.io/s/datagrid-react-modern-calendar-8v432y
What can I do to do not overflow the table boundaries, and show the calendar picker on top of everything?
Thanks a bunch for your help.
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 am using material-UI autocomplete for a project that involves rendering a dynamic array based on what you select from the menu. I am finished with the project and now trying to implement multi-select to make choosing things from the menu easier. When you have everything you want from the menu, you click an "Add" button that takes everything you currently have selected and adds it to a table (and adds the properly formatted text into a query on the side, the goal is to build queries for users without them worrying about syntax). When I was not using multiselect, and only adding one thing at a time to the query, I was easily able to clear the autocomplete field by changing the value prop to null. This prevents users from adding the same fields to the query over and over (when add is clicked the options that were added are popped from the list of options). When using multi the rules seem to change and now changing value directly causes an error. My question is, does anyone know of a way to programattically click the x button built in to material-ui autocomplete fields to clear that text field in an event handler? Or is there any reliable way of clearing that on my end?