Currently using Mui 5 and ran into an interesting issue. There's a prop to prevent selection of a row - isRowSelectable; however, there doesn't seem to be a way to prevent de-selection of a row.
Here's the use case: when the user selects all, we want to prevent them from deselecting any individual rows (until they deselect all).
Example of isRowSelectable (https://codesandbox.io/s/nez8ec?file=/demo.tsx) need one for controlling deselection.
Related
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?
I'm using material-table to show some data, now I want to select one row at the time to pass the row's data to another component, so being able to select multiple rows at the time isn't what I'm looking for and the main suggestion is to go for a radio button. So is there a way to replace the checkbox on the table with radio buttons or make the selection option to only allow one row to be selected at the time?
According to documentation your hands are tied. But, this might work:
Add selectedRow key to the component which uses MaterialTable
Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
When user select some row, set selectedRow to that row object
If user click on "slelect all" checkbox (top left) - show notification that action is not supported. If there is no way to unselect all checkboxes programatically - unmount and than mount MaterialTable (to reset checkboxes)
If one row is already selected, than another one get selected (which makes two selected rows) - repeat step "4"
I know this is a bit complicated, but it's a best I could think of at the moment
n.b. Another thing you can do (to force users to select only one row) is to hide table on multiple selection and show message about what they can do. Message could be closable. When message get closed fresh table could appear (mount aggain).
Update
Just have found another option that might work for you. Take a look at this page at the "Simple Action Example". There you have buttons instead of checkboxes. I am starting to think that:
options={{
selection: true
}}
is not the right option for you.
I'm working on a table component with React and I'm encountering an issue with a large table set (> 500 rows). Indeed, When I try to highlight the row where I clicked on, I encounter a big leak in performances.
In order to achieve the row selection, I'm holding a state containing the currently active row in the top component which consists of a container for all the rows in my table. When I click on a cell, I'm updating this state with the row the cell is part of.
This cause a trigger of the render() method my top component and the whole application becomes slow due to huge amount of elements re-rendered.
How can I re-render just the selected row? Is there a general best-practice to avoid the re-render of all the components under by top component?
What about using CSS? You can use :hover property over each row and change the background color each time the mouse is over or clicked. The performance stress is to low if you use the CSS property.
Good luck
I recently did build a grid component in react. My approach to get a fast responding grid on selection and keyboard navigation:
Do not render rows that is outside the viewport (visible range).
Use an unique key on all rows as mentioned in the comments.
Have the selected row key as a component variable (not in state).
On selection update selected row key variable and then update the DOM directly without re-rendering. I get a ref to the grid and then use getElementsByClassName to set remove active class from any active row. Then set active class + focus to the selected row.
I realize that your implementation differs from mine but hopefully you can get some ideas at least.
I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
I am using EditorGridPanel with cellEditor which acts nearly like Excel. We implemented Arrow Keys to move among rows and
columns. We do row validation when user moves from one row to another (specifically in rowdeselect event) and then save the
record. There is some issues are:
For the last row of the grid, rowdeselect event does not fire, as we do not have any other control after the grid.
rowdeselect event fires if we move from row to row using Tab, Enter & Arrow keys. But when user clicks on another row using mouse - events do not come in correct sequence, so focus moves to the new row, but earlier row not saved. Currently we solved this by calling stopEditing at the beginning of rowdeselect event.
We would like to know how we can solve these two issues and whether there are more robust ways to handle automatic grid saving.
You can fill free to check the problem in our site. -> http://www.softworksbd.com/swazilandlmis/yyyy_stockdata.php
1 ) First of all the event is not firing on the blur of the whole grid and not just the last row. try changing a row and clicking anywhere on the screen but the grid and you will see that no validation takes place (which means your rowdselect does not fire).
You should try and add a blue event to the whole grid that runs your validation scripts.
2) As far as I have checked the event is fired even on another row click so please explain exactly what you mean...
ps
I have viewed only this page in your application: