I was populating v1 with a data structure like:
[{"label":"email","resource_type":"Email","options":[{"label":"Desc","value":1}]},{"label":"survey","options":[{"label":"HXH","value":3}]
And then populating another select with nested options. But now v2 auto populates the select with opt groups because of the nested option key of my json. How do I disable that?
There doesn't seem to be anything in react-select to disable the grouping but you could map your options before passing them into react-select so that it only includes the relevant data.
const originalOptions = [
{ label: 'email', resource_type: 'Email', options: [{ label: 'Desc', value: 1 }] },
{ label: 'survey', options: [{ label: 'HXH', value: 3 }] },
];
<Select
options={originalOptions.map(option => {
return { label: option.label, value: option.value };
})}
/>
Related
I'm trying to implement a categories input with this data returned from my DB
[
{
_id: '63e59f91bd2a21368188ff4b',
title: 'Uncategorized',
slug: 'uncategorized',
categoryType: 'blog',
createdAt: '2023-02-10T01:36:17.704Z',
updatedAt: '2023-02-10T01:36:17.704Z',
},
{
_id: '63e5984028745af5bad2c015',
parentCategory: {
_id: '63e5974a786719dd4bb2d37b',
title: 'Projects',
},
title: 'YTDownloader',
slug: 'ytdownloader',
categoryType: 'blog',
createdAt: '2023-02-10T01:05:04.919Z',
updatedAt: '2023-02-10T01:05:04.919Z',
},
{
_id: '63e597c3786719dd4bb2d387',
parentCategory: {
_id: '63e5974a786719dd4bb2d37b',
title: 'Projects',
},
title: 'Song Finder',
slug: 'song-finder',
categoryType: 'blog',
createdAt: '2023-02-10T01:02:59.742Z',
updatedAt: '2023-02-10T01:02:59.742Z',
},
]
What I'm trying is to create the example given in the documentation since my categories are pretty much 'parents' or 'childrens' and don't want to have them unorganized.
So far this is what I've been trying but to not success:
<Select
placeholder="Select category"
defaultValue={category}
onChange={(e) => {
setObjectData({
...objectData,
category: e,
})
}}
value={category}
options={[
categories.map((c, i) => [
{
label: c.parentCategory ? c.parentCategory.title : c.title,
},
]),
]}
/>
This returns literally nothing, not even an error. What I was expecting is the following:
<Select
defaultValue={category}
onChange={(e) => {
setObjectData({
...objectData,
category: e,
})
}}
value={category}
options={[
{
label: 'Projects',
options: [
{
label: 'YTDownloader',
value: '63e5984028745af5bad2c015',
},
{
label: 'Song Finder',
value: '63e597c3786719dd4bb2d387',
},
],
},
{
label: 'Uncategorized',
value: '63e59f91bd2a21368188ff4b'
],
},
]}
/>
Has anyone done something like this before? It will be great if you guys can help me solve this little issue that's been giving a headache for the last 2 hours, LOL
My guess would be you have only passed objects to options that only have a label and no value. This is speculation, but it's possible nothing is rendered in the dropdown if there is no corresponding value to each label.
The label, which is what the user sees for each option, isn't necessarily its underlying value.
Keep in mind the value is ultimately the thing that will be passed to onChange, so to only have a label with no value could explain why it just does nothing -- because a valid option must have a value.
Map each option such that its value represents that option uniquely:
categories.map((c, i) => [
{
label: c.parentCategory ? c.parentCategory.title : c.title,
value: c._Id
},
]),
I used antd-form-builder to create a form. The form contains select field (dropdown). I used form.getFieldValue("task") to get the value of selected option, I also need to get the label of selected option. how can I get it by clicking on a button?
const meta = (
fields: [
{
key: "task",
label: "Task",
widget: "select",
widgetProps: { showSearch: true },
options: [
{ label: "Pre-filter Replacement", value: 1 },
{ label: "Oil Change", value: 2 },
],
},
]
)
const handleClick = () => {
let taskValue = form.getFieldValue("task")
}
<Form form={form} onValuesChange={forceUpdate} onFinish={onFinish}>
<FormBuilder meta={meta} form={form} />
<Button onClick={handleClick}>Done</Button>
</Form>
You can use labelInValue prop to get the value along with selected option label.
Pass labelInValue: true, in widgetProps
const meta = {
fields: [
{
key: "task",
label: "Task",
widget: "select",
widgetProps: {
showSearch: true,
labelInValue: true,
},
options: [
{ label: "Pre-filter Replacement", value: 1 },
{ label: "Oil Change", value: 2 },
],
},
],
};
Now task value will not be a number buy an object containing label, value, key, disabled.
You can follow the Select API Documentation
So I am using the Antd Cascader component (for the first time, having used Antd Select for most other things for the past few months). However, it isn't quite working yet. I have the options basically like this (but with a lot more options, only 3 levels deep tho like this):
const options = [
{
label: 'Base 1',
value: 'base_1',
children: [
{
label: 'Middle a',
value: 'middle_a',
children: [
{
label: 'Foo',
value: 'd57b2b75-4afa-4a16-8991-fc736bce8cd5',
},
{
label: 'Bar',
value: 'd12b2b75-4afa-4a16-8991-fc736bce8cec',
}
]
},
{
label: 'Middle b',
value: 'middle_b',
children: [
{
label: 'Baz',
value: 'd32b2b75-4afa-4a16-8991-fc736bce8cdd',
},
{
label: 'Quux',
value: 'dabb2b75-4afa-4a16-8991-fc736bce8ced',
}
]
}
]
},
{
label: 'Base 2',
value: 'base_2',
children: [
{
label: 'Middle a',
value: 'middle_a',
children: [
{
label: 'Helo',
value: 'd32bce75-4afa-4a16-8991-fc736bce8cdd',
},
{
label: 'World',
value: 'dabbac75-4afa-4a16-8991-fc736bce8ced',
}
]
}
]
}
]
I configure the component like this:
<Cascader
options={options}
getPopupContainer={trigger => trigger.parentNode}
multiple={multiple}
displayRender={label => {
return label.join(' / ');
}}
value={defaultValue}
// eslint-disable-next-line #typescript-eslint/no-explicit-any
onChange={(val: any, options: any) => {
if (multiple) {
const ids = serializeCascaderOptionValues(options);
onChange?.(ids, options);
} else {
onChange?.(val[2] ? String(val[2]) : undefined, options);
}
}}
showSearch={{
filter: (input: string, path) => {
return path.some(
option =>
String(option?.label).toLowerCase().indexOf(input.toLowerCase()) >
-1
);
},
}}
/>
Where, here, value or defaultValue I am passing in an array like ['d32bce75-4afa-4a16-8991-fc736bce8cdd'], which maps to Base 2 / Middle a / Helo. When I select the value Base 2 / Middle a / Helo from the UI, it shows correctly in the input like that. But when I save it and refresh the page (persisting to the backend, and pass in value={value} like value={['d32bce75-4afa-4a16-8991-fc736bce8cdd']}, it shows the ID hash in the input instead of the nice string Base 2 / Middle a / Helo. When I log displayRender={label...}, the label is showing the [ID-hash], rather than an array of like ['Base 2', 'Middle a', 'Helo']. What am I doing wrong, how do I get it to show properly?
I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?
Here is a sample screenshot of what table might look like but will be shown via dataTable
The explanation of what you are trying to do is a little bit unclear.
If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:
columns={[
{ title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
{ title: 'Name', field: 'name' },
....
]}
This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter.
Is it what you are looking for? Else would you mind explaining a little bit more what you want?
EDIT
Here is what i obtain
with the following code
<MaterialTable
data={[
{ name: '', nationality: 'British', address: '', country: 'England' },
{ name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
{ name: '', nationality: 'Chinese', address: '', country: 'China' },
{ name: '', nationality: '', address: '', country: '' },
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Nationality', field: 'nationality' },
{ title: 'Address', field: 'address' },
{ title: 'Country', field: 'country' },
]}
options={{
rowStyle: {
height: '25px',
},
}}
title="Display Data"
/>
You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.
In your data props you need to give a list of objects with all the datas you need.
You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:
{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>
for the empty row to have the same size as others, use props options on your table.
Does this help you?
I have (a seemingly common) problem with empty option values an angular model viewed using a select using ng-options.
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: null },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
<select ng-model='form.groupType' required ng-options='option.value as option.name group by option.group for option in groupTypeOptions'></select>
A fiddle can be seen here:
http://jsfiddle.net/v6z3zh49/
My goal is to, from a predefined model, show a grouped select with the selected item representing null (or empty string). However, when selecting a value and I always end up with an extra, empty, option element being added. See fiddle above.
I have looked at similar questions, for example here and here, but cannot find a solution.
Any tips?
Try:
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: undefined },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
It happens because in javascript null !== undefined.
Hope, it will help.
Demo: http://jsfiddle.net/ababashka/skk4uj1y/