I am using antd table for displaying dynamic multiple tables in a react app by mapping a array and rendering the table inside of a collapse of antd
Code: –
import { Button, Input, Table, Collapse } from "antd";
import React, { useState } from "react";
export default function LogbookForm() {
const { Panel } = Collapse;
const [data, setdata] = useState([
{
section_name: "XYZ",
details: [
{
id: 1,
name: "c++",
goals: 6,
assists: 10,
},
{
id: 2,
name: "python",
goals: 6,
assists: 10,
},
{
id: 3,
name: "native",
goals: 6,
assists: 10,
},
{
id: 4,
name: "react",
goals: 6,
assists: 10,
},
{
id: 5,
name: "java",
goals: 6,
assists: 10,
},
{
id: 6,
name: "javs script",
goals: 6,
assists: 10,
},
],
},
{
section_name: "ABC",
details: [
{
id: 1,
name: "c++",
goals: 6,
assists: 10,
},
{
id: 2,
name: "python",
goals: 6,
assists: 10,
},
],
},
]);
console.log(data);
const [tableData, setTableData] = useState([
{
id: 1,
name: "c++",
goals: 6,
assists: 10,
},
{
id: 2,
name: "python",
goals: 6,
assists: 10,
},
{
id: 3,
name: "native",
goals: 6,
assists: 10,
},
{
id: 4,
name: "react",
goals: 6,
assists: 10,
},
{
id: 5,
name: "java",
goals: 6,
assists: 10,
},
{
id: 6,
name: "javs script",
goals: 6,
assists: 10,
},
]);
const onInputChange = (key, index, record, text, i) => (e) => {
console.log(key, index, record, text, i, e);
const newData = [...tableData];
newData[index][key] = e.target.value;
setTableData(newData);
};
const columns = [
{
dataIndex: "name",
title: "process Stage",
width: "7%",
key: "name",
i: "",
render: (text, record, index, i) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index, text, record, i)}
/>
),
},
{
dataIndex: "goals",
title: "standard",
key: "goals",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("goals", index)}
/>
),
},
{
dataIndex: "assists",
title: "actual",
key: "assists",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("assists", index)}
/>
),
},
{
dataIndex: "name",
title: "strength",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "real",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "volume",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "ph",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "Temp",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "Start Time",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
dataIndex: "name",
title: "End Time",
width: "7%",
key: "name",
render: (text, record, index) => (
<Input
key={index}
value={text}
onChange={onInputChange("name", index)}
/>
),
},
{
render: (text, record, index) => {
return (
<Button
type="text"
className="dlt-action"
key={index}
onClick={() => handleDelete(index)}
>
<i className="far fa-trash-alt"></i>
</Button>
);
},
},
];
const handleDelete = (index) => {
let temp = [...tableData];
temp.splice(index, 1);
setTableData([...temp]);
};
const handlesubmit = () => {
console.log(tableData);
};
const handleAddRows = () => {
console.log(columns.length);
const obj = {
id: tableData.length + 1,
name: "",
goals: null,
assists: null,
};
let temp = [...tableData];
temp.push(obj);
setTableData([...temp]);
};
const addDetails = (i) => {
let temp = [...data];
const obj = {
id: temp[i].details.length + 1,
name: "",
goals: null,
assists: null,
};
temp[i].details.push(obj);
setdata([...temp]);
console.log(data);
// console.log(obj);
};
const callback = (k) => {
console.log(k);
};
return (
<div>
<Collapse expandIconPosition="right" onChange={callback}>
{data &&
data.length > 0 &&
data.map((section, in) => {
return (
<Panel key={in} header={section.section_name}>
<Table
key={(record) => record.id}
columns={columns}
dataSource={section.details}
/>
</Panel>
);
})}
</Collapse>
<Button onClick={() => handlesubmit()}>save changes</Button>
</div>
);
}
To perform crud operations inside each table, i would require the variable ‘in’ so that i can operate the array as required, i am not able to retrieve the information that which table the user is currently working on, and thus cannot determine the way to perform operations required like edit create and delete.
I want to know is there any way to pass the variable ‘in’ to the columns so that,i can perform operations??
Illustration: –
enter image description here
