I use in my React app:
import MUIDataTable from "mui-datatables";
I'd like to add some button to my last column header (instead of the column name):
<MUIDataTable
data={data}
columns={columns}
options={options}
>
</MUIDataTable>
where columns:
export const columns = [
{
name: "name",
label: "Nazwa",
options: {
filter: true,
sort: true,
}
},
{
name: "productNumber",
label: "Numer",
options: {
filter: true,
sort: true,
}
}, (...)
How to do that? Is it possible? I can't find anything
You can define a custom body for column. You can add a column like this:
{
name: "Age",
options: {
filter: false,
customBodyRender: (value, tableMeta, updateValue) => (
<FormControlLabel
control={<TextField value={value || ''} type='number' />}
onChange={event => updateValue(event.target.value)}
/>
)
}
}
You need to use customHeadRender
const columns = [
{
name: "id",
label: "Id",
options: {
filter: false,
}
},
{
name: "subject",
label: "Subject",
options: {
filter: true,
sort: false,
}
},
{
name: "button",
options: {
customHeadRender: ({index, ...column}) => {
return (
<Button key={index}>
Click
</Button>
)
}
}
}
];
Related
I am trying to change the background color or text color of a row after it is clicked using MUI DataTables. Does anyone know how I could go about doing this? I tried playing around with onRowClick but I can not figure out a way to update the color of a specific row. Thank you so much!
export default function CoursesTable() {
const columns = [
{
name: "dept",
label: "Dept",
options: {
filter: false,
sort: false,
}
},
{
name: "number",
label: "ID",
options: {
filter: false,
sort: true,
}
},
{
name: "title",
label: "Name",
options: {
filter: false,
sort: false,
}
},
{
name: "prereqs",
label: "Prerequisites",
options: {
filter: false,
sort: false,
display: false,
}
},
{
name: "description",
label: "Description",
options: {
filter: false,
sort: false,
display: false,
}
}
];
const data = courses;
var arr: string[] = [];
const handleRowClick = (rowData, rowMeta) => {
const courseID = rowData[0] + ' ' + rowData[1];
if (arr.includes(courseID)){
const index = arr.indexOf(courseID);
arr.splice(index, 1);
}
else if (arr.length >= 7) {
alert('You can not have more than 7 courses in your cart!')
}
else {
arr.push(courseID);
}
};
return (
<div>
<MUIDataTable
title = {"Course List"}
data = {data}
columns = {columns}
options={{
selectableRowsHideCheckboxes: true,
caseSensitive: false,
download: false,
onRowClick: handleRowClick
}}
/>
<Cart arr = {arr}/>
</div>
)
}
Please let me know if you need any further clarifications of what I am trying to do!
I am using reacts to develop a website. I need to put a dropdown in only one column.
const tableConfigs = [
{
name: "return or not",
column: {
args: { dataIndex: ["product", "uuid"] },
},
},
{
name: "productid",
column: {
args: { dataIndex: ["product", "uuid"] },
},
},
];
const AllDetails = () => {
return (
<Records
apis={UserOrderItemAPI}
configs={{
modal: modalConfigs,
other: otherConfigs,
table: tableConfigs,
}}
title="all_Details"
/>
);
}
export default AllDetails;
I have this type of code. I want to add dropdown in a one column like this code:
{
name: "image",
column: {
args: {
dataIndex: ["product", "image"],
render: (src) => (
<Image src={src} height="40px" referrerPolicy="no-referrer" />
),
},
},
},
You can use this code for creating a select options. I hope it's use full for you.
import { Select } from 'antd';
const { Option } = Select;
const handleChange = (value) => {
console.log(value); // { value: "no", key: "no", label: "NO" }
};
{
name: "return or not",
column: {
args: { dataIndex: ["product", "uuid"],
rander: (select) => (
<Select labelInValue defaultValue={{value: 'no', label: 'NO',}}style={{width: 120,}} onChange={handleChange}>
<Option value="no">NO</Option>
<Option value="yes">YES</Option>
</Select>
)
}
},
},
I am working with Material_table, what I am looking for is that when my user applies a filter to send a method
I want to call this method
const subscribeRemoteRequestsArticle = (id) => {
subscriptionRemoteRequests = API.graphql(
.....
.....
}
Table
<MaterialTable
icons={tableIcons}
columns={[
{
field: "clacte",
title: props.translate("Key"),
/* customFilterAndSearch: (term, rowData) => subscribeRemoteRequestsArticle <-- here perform the test */
},
{
field: "nomcte",
title: props.translate("Customers"),
},
{
field: "nomemp",
title: props.translate("Company Key"),
},
{
field: "nomregion",
title: props.translate("Name region"),
},
{
field: "nomgirocom",
title: props.translate("Commercial Business"),
/* lookup: "NomGiroCom", */
},
]}
data={customerList}
title={props.translate("List of customers")} //
options={{
selection: true,
filtering: true,
search: false,
searchable: false,
selectionProps: rowData => ({
disabled: rowData.name === 'Mehmet',
color: 'primary',
})
}}
onSelectionChange={SelectRows}
localization={localization(props)}
/>
Someone who can tell me how to do it, or where I can find documentation to answer my question?
Pass your custom function to the prop columns.
<MaterialTable
columns={[
{
title: 'Clave',
field: 'clave',
customFilterAndSearch: (term, rowData) => subscribeRemoteRequestsArticle // here
}
]}
options={{
filtering: true
}}
/>
I'm looking to implement an efficient way of updating individual row entries.
My way seems does not work. Just to add, i'm getting my data from redux state.
I was contemplating on using popup modals but i'm looking to implement a more efficient way.
// action
import { HrEmployeeData } from "../../actions/employeeHR";
const EmployeeTable = (props) => {
useEffect(() => {
props.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 ${value}`)
}
>
Edit
</button>
);
},
},
},
];
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<MUIDataTable
title={"Employees Records"}
data={props.employeesDetail}
columns={columns}
options={options}
/>
</Paper>
</Grid>
</Grid>
</div>
);
};
export default connect(mapStateToProps, { HrEmployeeData })(EmployeeTable);
I need to change this data that is passed into a component
columns={[{
name: "Fund Name",
width: "40%"
}, {
name: "Review Date",
width: "20%"
}, {
name: "Company Debt",
width: "20%"
}, {
name: "Alerts",
width: "10%"
}, {
name: "Actions",
width: "10%",
options: 'customBodyRender: (value, tableMeta, updateValue) => { return (<Options />);'
}]
}
to this inside the component...
const columns = [{
name: "Fund Name",
}, {
name: "Review Date"
}, {
name: "Company Debt"
}, {
name: "Alerts",
}, {
name: "Actions",
options: {
customBodyRender: (value, tableMeta, updateValue) => {
return ( <Options /> );
}
}
}
}];
Basically I've got this far....
let columns = this.props.columns.map((item, key) =>
{ name: item.name }
);
This obviously isn't right but I'm not sure how to say that columns needs to be an array of the data in the .map function.
Please help.
Thanks
Use eval keyword to convert strings to JS expressions
let columns = this.props.columns.map(item =>
item.options
? ({ ...item, options: eval(item.options) })
: item
);
But there is one problem though. Babel cannot transpile the output of eval since it's generated in runtime. So you must convert JSX to normal JS expressions that doesn't need transpilation.
So you code must be like this
const columns = [{
name: "Actions",
options: {
customBodyRender: '(value, tableMeta, updateValue) => { return React.createElement(Options, null); }'
// or
customBodyRender: '(value, tableMeta, updateValue) => { return /*#__PURE__*/_react.default.createElement(Options, null); }'
// Depends on your babel configurations
}]