I have a custom field for user status but I want to disable the default sorting on that column.
like when we use predefined fields like
It is possible to disable sorting for a specific field by passing a sortable property set to false: https://marmelab.com/react-admin/List.html#disabling-sorting
<TextField source="id" sortable={false} />
Related
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 have been trying to get an autocomplete component to save the state when a user types and clicks an item from the autocomplete list. I'm trying to filter my table using this state. Currently my table is filtering as data is typed into the text field but not when an item is clicked.
Here is my Autocomplete and TextField:
Here is my Table:
Here is my interface:
Any help would be great guys, thanks
You should move your onChange event from the textarea to the Autocomplete itself. Having it filter as you are typing is probably not the best idea as it will be happening as you type but you probably want it to happen when you actually select an option.
Having the autoSelect property will also help with if you type the name of the country without selecting it.
<Autocomplete
onChange={(event, newValue) => {
setSearchTerm(newValue)
}}
autoSelect
/>
Using react-select to have a select dropdown which allows async options loading and multi select. The default behavior of the library renders the selected options next to the input itself:
But I want to show the selected options in the options list rather than in the select header. I have achieved that by passing the Custom Option component. Here is the working example:
https://codesandbox.io/s/trusting-hellman-yidqn
And now I want to remove/hide the selected options from the header.
Also I want to show the placeholder back when focus is out of the input.
If you don't want the tags to show up in the input field, you can disable that by adding the attribute controlShouldRenderValue={false} to the item.
Question 1: I have a list view with a column for "Active":
I want to allow the user to select Active/Inactive from a radio button group as a filter (or dropdown). I know react-admin provides filters for reference fields out of the box. What about a non-reference field, like "Active"?
Question 2: Any way to add a clear button or "X" by the search field to quickly clear all filters? Currently, you have to select what's in Search and clear the text. Annoying having to use the mouse AND keyboard to clear filters. But, I'm guessing there's a way around it.
Thanks.
I want to allow the user to select Active/Inactive from a radio button
group as a filter (or dropdown). I know react-admin provides filters
for reference fields out of the box. What about a non-reference field,
like "Active"?
There is BooleanInput and NullableBooleanInput. Documentation is quite well written and there are lots of Input components to use.
Question 2: Any way to add a clear button or "X" by the search field
to quickly clear all filters? Currently, you have to select what's in
Search and clear the text. Annoying having to use the mouse AND
keyboard to clear filters. But, I'm guessing there's a way around it.
if you are using TextInput for search field there is prop resettable
With those two things combined you should have more or less similar code in filter component:
<Filter {...props}>
<TextInput label="Search" source="q" alwaysOn resettable />
<NullableBooleanInput label="Is Active" source="active" alwaysOn/>
</Filter>
Suppose I have 3 fields on a Silverlight based xaml page
Color, Size and SurpriseMe
where none of the fields are required and SurpriseMe is a checkbox initially set to checked.
I want to create the following behavior:
When SurpriseMe is cleared,
Display the required field data annotations for Color and Size
Enforce the required Validation
When SurpriseMe is checked,
Remove the required field data annotation
remove the restriction
Is there any easy way to do this?
You need to provide custom validation (see CustomValidationAttribute). You can roll your own or use a library like Fluent Validation.
You need to use a custom validation.