I use material table component and use specific render options for a few columns.
In one of the columns I use for instance the React-Mui component Checkbox.
...
{
title: "Actief",
field: "enabled",
render: (rowData) => {
return (
<Checkbox
checked={rowData.enabled}
onChange={(e) => ToggleActive(rowData) }
inputProps={{ 'aria-label': 'controlled' }}
disabled={(rowData.username === "test_admin" || rowData.username === "test_volunteer")}
/>);
}
},
...
Now I see a warning in the console:
The columns provided to material table are static, but contain
functions which update on every render, resetting the table state.
Provide a stable function or column reference or an row id to prevent
state loss.
However I cannot find anything about how to solve this.
Do I miss some option or what?
Related
I have an antd table in which I need to do some operations only when the click event happens on a specific column.
Currently, I am using the onRow prop in the table component as below
onRow={(record, rowIndex) => {
return {
onClick: (event) => {
// some operations
},
};
}}
With this implementation, click is triggered for the entire row ( when clicked on any column )
I have tried to see the column dataIndex or key to return the click event only when the event has happened on a specific column. But args of onRow do not have that data.
Is there a way to achieve the required behavior?
If I understand correctly you want to create a table with editable row. I would suggest to create a new column (e.g. Actions) in which you will have a button that when you click it, it will let you edit the row you want. Check the following link, hope it's what you are looking for:
https://codesandbox.io/s/editable-rows-antd-4-20-6-forked-hvul4u?file=/demo.js
If you are looking to capture click events for a specific column, you can use the onCell property for column. (Codesandbox)
const columns = [
{
title: "Name",
dataIndex: "name",
render: (text, row, index) => <a>{text}</a>,
onCell: (record, rowIndex) => {
return {
onClick: () => {
console.log(record, rowIndex);
}
};
}
},
...
]
I need to have a row action only in certain rows (with particular property values). For example, if I have a row that has the property isDeletable set to true, I would like to be able to delete it, i.e have a delete icon present in the actions column.
Thanks in advance!
In actions definitions of your MaterialTable component, you can access to rowData parameter which you can be used to conditionally calculate the disabled or hidden props of each action. Check the following example where the action enabled only when status ==='active'.
<MaterialTable
// ..other props
actions={[
(rowData) => {
return {
icon: "bug_report",
tooltip: "Report bug",
disabled: rowData.status === "active",
// hidden: rowData.status === "active",
onClick: (event, rowData) =>
alert("This client status is " + rowData.status)
};
}
]}
/>
Here is a sandbox whit a working example.
Let me know if that worked for you!
I want a single select option column component, hence used filterComponent property of the columns-props to render a custom Single Select Material-UI component. On Change of the option the value of the Select is updated. But I also need the row data to be filtered out. How can this be achieved?
Used customFilterAndSearch prop supported by columns props, this is not getting invoked because of using filterComponent to override the existing component.
Tried calling customFilterAndSearch onChange of the select options, for this to work, customFilterAndSearch expects 2 arguments 1. option/filter value, 2. row-data. I can obtain the 1st parameter value, but is there a way to obtain row-data ?
{
title: "Birth Place",
field: "birthCity",
lookup: birthCity,
customFilterAndSearch: (data, rowData) => {
console.log({ data, rowData });
return true;
},
filterComponent: (props) => {
return (
<Select
value={city}
onChange={(e) => {
setCity(e.target.value);
props.columnDef.customFilterAndSearch(e.target.value, {}); // don't know how to idenitfy row data and send as a parameter
}}
>
{Object.keys(birthCity).map((key) => {
return <MenuItem value={key}> {key} </MenuItem>;
})}
</Select>
);
}
}
Link to codesandbox
Hi guy I just do experiment on build bulk delete on tanstack React Table
the problem is here I can't change the id of the selected column
why do I want to change this?
because I want MongoDB id that can send to the server.
with selectedRowIds method
here some code from hook
hooks => {
hooks.visibleColumns.push(columns => [
// Let's make a column for selection
{
id: 'selection',
// accessor: '_id',
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => {
console.log(row)
return <div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
},
},
...columns,
])
and all full reference comes from the main documentation
use selectedFlatRows is contian all selected row data
There is an option you can pass to the useReactTable hook called getRowId that allows you to customize your row id.
getRowId?: (
originalRow: TData,
index: number,
parent?: Row<TData>
) => string
https://tanstack.com/table/v8/docs/api/core/table#getrowid
Just started using react-table, trying to figure out how to conditionally render something based on the accessor value. I get back some data from an api call and use one of the values for the accessor.
{
Header: "Action",
id: "startTime",
accessor: "attributes.startTime"
}
So I have a column with header "Action", here I want to conditionally render a button if the accessor value attrbiutes.startTime === null or something along those lines.
Rendering of the UI occurs in a different file so I also need to access it there for handling button onClick
I have a codesandbox here with a working example.
You can use custom cell renderer
const columns = [
{
Header: "Action",
id: "startTime",
accessor: "attributes.startTime",
Cell: props => {
return props.value === null ? <button>Click Me </button> : props.value;
}
}
];