master12-ctr
commented
1 month ago The Problem:
I want to hide the "Nationality_a" field when the value or the selected value of the "Nationality" field is "Kenya" or some other specific value. However, I don't know how to hide the visibility of the column. Instead, I prefer to disable the editing of the "Nationality_a" field when the value of the "Nationality" field is a specific value.
Initially, I tried to achieve this by using the enableEditing prop, which checks the value of the "Nationality" field and disables editing for the "Nationality_a" field accordingly. However, this approach only works the first time, and the disabling does not reflect the changes in the "Nationality" field.
To address this, I want to use the onChange event of the "Nationality" field to update the editing state of the "Nationality_a" field. However, this approach is also not working as expected.
mantine-react-table version
v 1.3.4
react & react-dom versions
v 17.0.2
Describe the bug and the steps to reproduce it
type of the value prop in the mantineEditSelectProps object is not compatible with the expected type of the Select component.
The Select component from the @mantine/core package expects the value prop to be of type ((string | number | readonly string[]) & string[]) | undefined. However, the nationality state variable is of type string | null, which is not assignable to the expected type.
The root cause of this issue is that the Select component from Mantine is expecting a specific type for its value prop, and the type of the nationality state variable does not match that expectation.
Minimal, Reproducible Example - (Optional, but Recommended)
const [nationality, setNationality] = useState<string | null>(null);
{ accessorKey: 'nationality', header: 'are you Ethiopian?', editVariant: 'select', mantineEditSelectProps: { component: Select, value: nationality, onChange: (value) => { setNationality(value); }, data: [ { value: 'Ethiopian', label: 'Ethiopian' }, { value: 'Kenya', label: 'Kenya' }, { value: 'France', label: 'France' }, ], }, }, { accessorKey: 'nationality_a', header: 'ዜግነት', mantineEditTextInputProps: { type: 'text', required: true, // error: validationErrors?.lastName, }, enableEditing: (row: MRT_Row) => {
return nationality?.includes('t') ?? false;
},
},
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
Yes, I think I know how to fix it and will discuss it in the comments of this issue
Terms