Im new to this Material-Table table. Im trying to set its options based upon what the user selects to do.
For example, I want to turn on/off filtering based upon if the user want to filter or not.
I have a button that sets a state variable true or false depending on when its selected.
this.state = {
filterStatus:false,
}
But my options property doesnt allow me to use the state variable.
options={{
filtering: {this.state.filterStatus}
}}
Is there a way to do this?
I want the user to be able to simplily have the option to turn off filtering with a push button.
To go from this,
enter image description here
to this
enter image description here
You can use filtering under options in MaterialTable as below:
<MaterialTable
title="Basic Filtering Preview"
columns={state.columns}
data={state.data}
options={{
filtering: state.filtering
}}
icons={tableIcons}
/>
In this example, I used a toggle button to trun off/on filtering.
Here is the Code Sandbox
Related
I want to build an UI for search functonality which looks bit similiar to what we have in gmail search.
Currently I have the UI for search which is done using material UI .
But now I have extra requirement where I should be able to open the drop down onfocusing the search input field and the dropdown should consist of 2 button.
Something like :
My Requirement:
I tried adding MenuItem inside TextField but the issue I face is I cannot write anything in search box.
Here is the code what I tried
<TextField
select
// for passing props in select component
SelectProps={{ IconComponent: () => null }}
value={text}
onChange={event => onSearch(evt.target.value)}
InputProps={{
placeholder: "Search...",
}}>
<MenuItem>
<div><button>Text 1</button></div>
<div><button>Text 2</button></div>
</MenuItem>
</TextField>
I also tried to build UI using material UI Autocomplete https://mui.com/material-ui/react-autocomplete/#combo-box but somehow it did not work as well, not sure if I did it in wrong way. My code is written in React.
Currently I have the search box as shown below, which need dropdown on focusing the search bar. It would be good if it can be done using material UI but not mandatory.
What I have now:
After I added the menuItem inside textfield, I get the desired dropdown on focusing the textfield but issue is now I am not able to type anything in the search box and I still want the search box to have both the dropdown and textfield functionality
I'm using Material UI DataGridPro component to build a React Js app.
I want to create a custom filtering.
The red box in the image below is an IconButton for the filtering view and the blue box is for the column showing/hiding view.
I want to change the behavior of the custom filtering view.
If the filter icon is clicked, then the DataGridPro header will show some Select and TextField components as the filter fields like this image below.
If we click one of the Select and TextField components, the Data Grid Pro component will trigger the onSortModelChange prop to change the sortModel value like this image below.
So now the Data Grid Pro component is sorted based on the column.
Here is the conditions I want:
if we click one of the Select and TextField components inside the Data Grid Pro header, the Data Grid Pro will not trigger the onSortModelChange prop which means that the sortModel value is not changed
Here is the playground: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js
I have tried to add sortable: false for every column but it will not show the arrow icon inside the Data Grid Pro header and prevent the column to be sorted. That's not what I want.
I also have added sortModel and onSortModelChange props for the Data Grid Pro component to control the sortModel value but it hasn't worked.
So, what's the solution for this case?
The MUI X team told me from the Github issue here https://github.com/mui/mui-x/issues/3655#issuecomment-1015263995 that the solution is very simple.
Just add event.stopPropagation() for the onClick prop of each TextField and Select component.
onClick={(event) => event.stopPropagation()}
I am working on react-select where I need to add custom icon with cross icon when user to select something from dropdown. I really tried hard but did not find any proper solution to resolve my problem . Could someone please help me how to add custom icon in react select .
Dropdown an attachment
As you see in attachment, you will see cross icon and I want my custom icon with this cross icon .
If you want to add an additional icon, you could still create a custom component (say for the ClearIndicator) then just add your icon to the component as a sibling alongside props.children and they should both appear on the DOM together
<Select
components={{
ClearIndicator: ({ ...props }) => (
<components.ClearIndicator
{...props}
>
{props.children}
<NewIcon>Your icon here</NewIcon>
</components.ClearIndicator>
),
}}
/>
Based on what I could find in this file, there is a component prop which takes an object which has these properties. You can probably use the CrossIcon or ClearIndicator property to specify the icon. In the end, it would like this:
<Select component={{
CrossIcon: // Icon here,
ClearIndicator: // Or here
}}
/>
I'm trying to find out how to change the html/css of the "pointer" part of vue-multiselect, e.g. https://vue-multiselect.js.org/#sub-props (showPointer)
For smaller screens the text "Press enter to select" is obscuring the value. So I'm trying to either remove the text or create my own hovering html/css.
Here's what it looks like on larger screens.
You can use showLabels props from vue-multiselect documentation. showLabels props has Boolean values true or false. If false then no pointer hover value will be shown. There have five custom props for controlling hover value like
selectLabel
selectGroupLabel
selectedLabel
deselectLabel
deselectGroupLabel
You should write show-labels props when implementing these props.
You can check this example from JsFiddle:
https://jsfiddle.net/sukantabala28/
I am using Ant Design in my React app.
In my Select Component I set showSearch to true.
<Select
showSearch={true}
mode="multiple"
...
Input value for search disappears after I selected one of the options. I'd like to search/filter e.g. London and be able to click several options at one search.
How can I do it?
There is open prop to control this feature.
open Controlled open state of dropdown boolean
<Select
open={someVariable}
showSearch={true}
mode="multiple"
...
source: antd documentation