I am trying to create a form using antd-form-builder how can I make its select field searchable?
import React from 'react'
import { Form, Button } from 'antd'
import FormBuilder from 'antd-form-builder'
export default () => {
const [form] = Form.useForm()
const meta = {
columns: 2
fields: [
{ key: 'select', label: 'Select', widget: 'select', options: ['Apple', 'Orange', 'Banana'] },
]
return (
<Form form={form}>
<FormBuilder meta={meta} form={form} />
<Form.Item className="form-footer">
<Button htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
)
}
Since each field in antd-form-builder is a widget, you can pass all the select props that for that particular by passing widgetProps as prop.
For example, to make select widget/field as searchable, you can pass showSearch: true.
const meta = {
columns: 2,
fields: [
{
key: "select",
label: "Select",
widget: "select",
options: ["Apple", "Orange", "Banana"],
widgetProps: { showSearch: true },
},
],
};
You can follow the antd documentation to check what type of props you can pass to select field.
Antd Select Props API
Related
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
How to make one option in react-select stick. (i.e: like position fixed, it will stay at the top even when we scroll through options in the drop-down)
Do you try to add css on react-select ?
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} style={{position: 'fixed !important'}} />
)
Kind regards,
Kilian GOËTZ.
I am using react hooks and have a dynamically filled array of values after a backend call. How can I then insert these values (which I don't know a priori) in a checkbox?
I get some properties from another component.
These properties change based on a selection from a table.
I would like to be able to add / remove these properties based on a selection on a checkbox when I open the "Available roles list"
const UsersList = (props) => {
const { loadedRoles } = props;
const [checked, setChecked] = useState([]);
const selectHandler = (Event, selected) => {
loadedRoles(selected.roles);
};
const handleChange = (Event) => {
setChecked({ ...props.roles, [Event.target.name]: Event.target.checked });
};
return (
<div>
<MaterialTable
title=" Users List"
data={props.users}
columns={[
{ title: "User Id", field: "id" },
{ title: "Active", field: "active" },
{ title: "System", field: "system" },
{ title: "Roles", field: "roles" },
]}
options={{
cellStyle: {
width: 100,
minWidth: 100,
height: 1,
},
headerStyle: {
width: 100,
minWidth: 100,
},
}}
onRowClick={selectHandler}
/>
<Card>Current Role: {props.current}</Card>
<Card>
<label>Available Roles: {props.roles}</label>
<Checkbox name={props.roles} onChange={handleChange} />
</Card>
</div>
I can assume that you receive from your backend an array of objects, containing the label, keys, and values for the checkboxes?
[
{ label: 'Checkbox #1', key: 'checkbox1', checked: true },
{ label: 'Checkbox #2', key: 'checkbox2', checked: false },
{ label: 'Checkbox #3', key: 'checkbox3', checked: true },
]
You can make the call to the API in a useEffect, store the result in a local state via useState, then iterate through the values in the rendering:
const [checkboxes, setCheckboxes] = useState(null)
useEffect(() => {
fetch('/your/api')
.then(res => res.json())
.then(checkboxes => setCheckboxes(checkboxes))
}, [])
return (
<ul>
{checkboxes === null
? <li>Loading...</li>
: checkboxes.map(checkbox => (
<li key={checkbox.key}>
<label>
<input type="checkbox" name={key} defaultChecked={checkbox.checked} />
{checkbox.label}
</label>
</li>
))
}
</ul>
)
The checkboxes here are not controlled (defaultChecked). To use controlled checkboxes instead, you’ll need to create another local state and initialize it from the values returned by the backend, and use checked & onChange props instead.
In my react/redux app, i have data already in the state found in redux and i want to pass that data to my react useState in order to serve the component with the data in terms of getting the current state data or updating the state data.
I have tried but my way is not working. What is the most efficient way of going about solving this issue with react hook. Also how to configure the react useEffect properly.
// action
import { HrEmployeeData } from "../../actions/employeeHR";
const EmployeeTable = ({ employeesDetail, HrEmployeeData }) => {
const [employeesDetail, setEmployeesDetail] = React.useState([]);
useEffect(() => {
HrEmployeeData();
}, []);
const classes = useStyles();
const columns = [
{ name: "name", label: "Name" },
{ name: "phone_no", label: "Contact" },
{ name: "email", label: "Email" },
{ name: "department", label: "Department" },
{ name: "job_title", label: "Title" },
{ name: "salary", label: "Salary" },
{ name: "date_employed", label: "Date Employed" },
{
name: "Action",
options: {
filter: true,
sort: false,
empty: true,
customBodyRender: (value, tableMeta, updateValue) => {
return (
<button
onClick={() =>
window.alert(`Clicked "Edit" for row ${tableMeta.rowIndex}`)
}
>
Edit
</button>
);
},
},
},
];
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<MUIDataTable
title={"Employees Records"}
data={employeesDetail} <--- WHERE THE DATA IS BEEING USED
columns={columns}
options={options}
/>
</Paper>
</Grid>
</Grid>
</div>
);
};
EmployeeTable.propTypes = {
employeesDetail: PropTypes.object,
};
const mapStateToProps = (state) => ({
employeesDetail: state.employeeHR.employeesDetail,
});
export default connect(mapStateToProps, { HrEmployeeData })(EmployeeTable);
You don't have to pass the data from the redux store the state.
The mechanism to use the redux store in components is "props".
In this case you're already mapping store to props and you can use it in the components.
Just remove the useState line.
I want to customize the row hat data in mui-datatble in such a way that if I get Yes in the option, background color should be Red and if I say No, background color should be Blue. I am using mui-datatable first time.
I am unable to use customRowRender or customRender. How do we use it in mui-datatable
import React from 'react';
import MUIDataTable from "mui-datatables";
class Datatable extends React.Component {
render() {
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
customRowRender:(data, dataIndex, rowIndex) => {
console.log('data' + data);
return (
<div>
{data}{' '}{dataIndex}{' '}{rowIndex}
</div>
);
}
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
}
}
];
const data = [
{ name: "Joe James", company: "Test Corp" },
{ name: "John Walsh", company: "Test Corp" }
];
const options = {
filterType: 'checkbox',
};
return (
<React.Fragment>
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
</React.Fragment>
);
}}
export default Datatable;
I should be able to render data in customRender where I will add a conditional render with a <div> and style depending on Yes/No
You have put the customRowRender property in the columns object, according to the doc it should be in the options object :
const options = {
filterType: 'checkbox',
customRowRender:(data, dataIndex, rowIndex) => {
console.log('data' + data);
return (
<div>
{data}{' '}{dataIndex}{' '}{rowIndex}
</div>
);
}
};
// render
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
But this is for rendering a custom row, if you want to render a custom column, then you can use customBodyRender property in the columns object.