Getting the table values through props. The claim update function is working fine, but the record still there. once I refresh or select another tab only after that the claimed record will be removed.
{
title: 'Action',
dataIndex: 'action',
render: (text, record) =>
<Button class="claimBom-btn" onClick={(e) => this.handleClaim(e,text, record)} ><Icon type="plus-circle" />Claim</Button>
}
This the button call for all record in the table
Just pass along the button state in the datasource.
When it is clicked mutate the datasource.
const [datasource, setDatasource] = useState([
{
disabled: false,
// others properties
}
]);
// On button click find the data and change disabled property
const onClick = (id) => {
const source = datasource.find(source => source.id === id);
source.disabled = true;
setDatasource(datasource);
}
{
title: 'Action',
dataIndex: 'action',
render: (text, record) =>
<Button disabled={text.disabled} class="claimBom-btn" onClick={(e) => this.handleClaim(e,text, record)} ><Icon type="plus-circle" />Claim</Button>
}
You can simply pass the disabled prop to the button accordingly. When calling this.handleClaim, set a state of which button should be disabled while handling, and pass that as a disabled prop to the button.
Related
We're trying to use ag-grid to display and edit different types of data, for example a color. We have a react component that displays a set of colors for the user to choose from, with OK and CANCEL buttons that close the dialog (it's a MUI Dialog component) and calls a callback function prop with the selected color (if OK clicked).
We are able to get this dialog to display from the ag-grid cell, but can't figure out how to get the color returned to the cell. Currently the color dialog is defined as
const ColorChooser = ({initialColor, callback}) => {
const [color, setColor] = useState(initialColor);
const [open, setOpen] = useState(true);
and the OK button handler is simply
const okHandler = () => {
if (callback) {
callback(color);
}
setOpen(false);
}
where the open state opens / closes the MUI Dialog.
In another component we are able to display the dialog from the ag-grid based on the 'type' of the data in the grid cell:
//
// Return the appropriate editor based on the cell contents
const selectEditor = (params) => {
if (params.data.dataType === 'string') {
return (
{
component: 'agTextCellEditor',
params: params,
}
)
}
else if (params.data.dataType === 'color') {
return (
{
component: ColorChooser,
params: params,
popup: true,
popupPosition: 'under'
}
)
}
}
const [columnDefs] = useState([
{ field: 'property', lockPosition: 'left', resizable: true, sortable: true, flex: 1 },
{ field: 'value', editable: true, flex: 1, cellEditorSelector: selectEditor, cellRendererSelector: selectRenderer }
]);
and this is where we're stumped. The color dialog displays but we can't figure out how to get the selection back to the cell when the OK button is clicked.
In case it's not obvious I'm fairly new to react and ag-grid, apologies if this is too elementary. Thanks!
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'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>
);
}
}
]
I have an antd table where the data inside one of the columns can get pretty large. I am showing this data in full when the row is expanded but because the cell with a lot of data is on the right side of the screen and the expander icon is on the left side of the screen it is not very intuitive. What I would like to do is move the expander icon inside the actual cell so that the user knows they can click the + to see the rest of the data.
Thanks in advance.
Yes, you can and you have to dig a little deeper their docucmentation...
According to rc-table docs you can use expandIconColumnIndex for the index column you want to add the +, also you have to add expandIconAsCell={false} to make it render as part of the cell.
See Demo
This is how you can make any column expendable.
First add expandedRowKeys in your component state
state = {
expandedRowKeys: [],
};
Then you need to add these two functions onExpand and updateExpandedRowKeys
<Table
id="table-container"
rowKey={record => record.rowKey}
className={styles['quote-summary-table']}
pagination={false}
onExpand={this.onExpand}
expandedRowKeys={this.state.expandedRowKeys}
columns={columns({
updateExpandedRowKeys: this.updateExpandedRowKeys,
})
}
dataSource={this.data}
oldTable={false}
/>
This is how you need to define the function so
that in expandedRowKeys we will always have
updates values of expanded rowKeys
onExpand = (expanded, record) => {
this.updateExpandedRowKeys({ record });
};
updateExpandedRowKeys = ({ record }) => {
const rowKey = record.rowKey;
const isExpanded = this.state.expandedRowKeys.find(key => key === rowKey);
let expandedRowKeys = [];
if (isExpanded) {
expandedRowKeys = expandedRowKeys.reduce((acc, key) => {
if (key !== rowKey) acc.push(key);
return acc;
}, []);
} else {
expandedRowKeys.push(rowKey);
}
this.setState({
expandedRowKeys,
});
}
And finally, you need to call the function updateExpandedRowKeys
for whichever column you want to have the expand-collapse functionality available.
Even it can be implemented for multiple columns.
export const columns = ({
updateExpandedRowKeys,
}) => {
let columnArr = [
{
title: 'Product',
key: 'productDes',
dataIndex: 'productDes',
className: 'productDes',
render: (text, record) => (
<span onClick={rowKey => updateExpandedRowKeys({ record })}>
{text}
</span>
),
}, {
title: 'Product Cat',
key: 'productCat',
dataIndex: 'productCat',
className: 'product-Cat',
}]
}