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!
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 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?
I'm using Ant Design table component: https://ant.design/components/table/#Table
In each row, I'm rendering a title and some link. For example:
Product 1
https://example.com/link/product/1
I'm using the onRow API to open a modal to edit the info for the row, which is working fine. However, the onRow event is also trigged if I click on the link. Is there a way to not trigger the onRow event if I just click on the link in the row, and still keep everything as normal if I click on anywhere on the row cell?
Note: my current work around is using an isEditing state flag, but it's not a good experience since I have to get into "edit mode" and set isEditing to true.
You'd better show your code usage of onRow and columns, If you use onRow.onClick like below:
<Table
onRow={(record, rowIndex) => {
return {
onClick: event => {}, // click row
};
}}
/>
You can custom render of link with Event.stopPropagation() like this:
const columns = [
{
dataIndex: "link",
title: "Link",
render: (value) => {
return (
<a
onClick={(event) => event.stopPropagation()}
href={value}
target="_blank"
>
Link
</a>
);
}
}
]
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;
}
}
];
i have some questions :)
i try to put an Avatar tag in every row in my table and edit Button, and its take the edit button to both.
How can I move an action to the right side of the table?
How do I undo the title of "Actions" at the top of the table?
And what exactly "PROPS" should I pass if I use TS in the following example:
<MaterialTable
icons={tableIcons}
columns={this.state.columns}
data={this.state.data}
title='Users Management'
actions={[
{
icon: 'edit',
tooltip: 'Edit User',
onClick: (event) => { alert('Edit!!'); },
},
{
icon: 'avatar',
tooltip: 'Avatar User',
onClick: (event) => { alert("You want to delete "); }
}
]}
components={{
Action: **props** => (
<Button
onClick={(event: any) => props.action.onClick}>
EDIT
</Button>
),
}}
/>
enter image description here
So lets split this question into parts:
How do I undo the title of "Actions" at the top of the table? You can simply override the localization={{header.actions: 'Test'}} prop to change the action column title to change it e.g. to Test. You can also add a white space to hide it.
How can I move an action to the right side of the table? You can override options={{actionsColumnIndex: 1}} to e.g. move it to the second position or set it to -1 to move it to the end of all columns.
its take the edit button to both. Since you do not provide custom elements, it renders a text. You have to import icons={tableIcons} as written in the readme. To show an avatar icon, simply add avatars object to your tableIcons object.
To know which props to pass, look at this docs page.