My project uses ReactJS and the antd library.
I am facing an issue with displaying data in a table as follows:
Currently, the columns of the table are working correctly, but the rows of the table are not displayed correctly because I am fetching the rows based on the index from a for loop. If the values field of the variants is not consistent, the rows displayed will be incorrect.
Please help me address this issue. Thank you very much!
Here is my code:
Data json:
[
{
"id": 1,
"name": "Style",
"values": [
{
"id": 1,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 7,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 13,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 19,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 25,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 31,
"variant_id": 1,
"label": "Hoodie",
"value": "Hoodie"
},
{
"id": 41,
"variant_id": 1,
"label": "T-shirt",
"value": "T-shirt"
},
{
"id": 47,
"variant_id": 1,
"label": "T-shirt",
"value": "T-shirt"
}
]
},
{
"id": 2,
"name": "Color",
"values": [
{
"id": 2,
"variant_id": 2,
"label": "Black",
"value": "#000000"
},
{
"id": 8,
"variant_id": 2,
"label": "Black",
"value": "#000000"
},
{
"id": 14,
"variant_id": 2,
"label": "White",
"value": "#ffffff"
},
{
"id": 20,
"variant_id": 2,
"label": "White",
"value": "#ffffff"
},
{
"id": 26,
"variant_id": 2,
"label": "Light Pink",
"value": "#ffb6c1"
},
{
"id": 32,
"variant_id": 2,
"label": "Light Pink",
"value": "#ffb6c1"
},
{
"id": 42,
"variant_id": 2,
"label": "Red",
"value": "#842b2b"
},
{
"id": 48,
"variant_id": 2,
"label": "Red",
"value": "#842b2b"
}
]
},
{
"id": 3,
"name": "Size",
"values": [
{
"id": 3,
"variant_id": 3,
"label": "S",
"value": "S"
},
{
"id": 9,
"variant_id": 3,
"label": "M",
"value": "M"
},
{
"id": 15,
"variant_id": 3,
"label": "S",
"value": "S"
},
{
"id": 21,
"variant_id": 3,
"label": "M",
"value": "M"
},
{
"id": 27,
"variant_id": 3,
"label": "S",
"value": "S"
},
{
"id": 33,
"variant_id": 3,
"label": "M",
"value": "M"
},
{
"id": 43,
"variant_id": 3,
"label": "S",
"value": "S"
},
{
"id": 49,
"variant_id": 3,
"label": "M",
"value": "M"
}
]
},
{
"id": 4,
"name": "Price",
"values": [
{
"id": 4,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 10,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 16,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 22,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 28,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 34,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 44,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 50,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 54,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 58,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 62,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 66,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 70,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 74,
"variant_id": 4,
"label": "0",
"value": "0"
},
{
"id": 78,
"variant_id": 4,
"label": "0",
"value": "0"
}
]
},
{
"id": 5,
"name": "Sku",
"values": [
{
"id": 5,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 11,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 17,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 23,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 29,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 35,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 45,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 51,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 55,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 59,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 63,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 67,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 71,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 75,
"variant_id": 5,
"label": null,
"value": null
},
{
"id": 79,
"variant_id": 5,
"label": null,
"value": null
}
]
},
{
"id": 6,
"name": "Status",
"values": [
{
"id": 6,
"variant_id": 6,
"label": "0",
"value": "0"
},
{
"id": 12,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 18,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 24,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 30,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 36,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 46,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 52,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 56,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 60,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 64,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 68,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 72,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 76,
"variant_id": 6,
"label": "1",
"value": "1"
},
{
"id": 80,
"variant_id": 6,
"label": "1",
"value": "1"
}
]
},
{
"id": 7,
"name": "Test",
"values": [
{
"id": 53,
"variant_id": 7,
"label": "Value test",
"value": "Value test"
},
{
"id": 57,
"variant_id": 7,
"label": "Value test 2",
"value": "Value test 2"
},
{
"id": 61,
"variant_id": 7,
"label": "Value test 3",
"value": "Value test 3"
},
{
"id": 77,
"variant_id": 7,
"label": "Value test 4",
"value": "Value test 4"
}
]
},
{
"id": 8,
"name": "Test 2",
"values": [
{
"id": 65,
"variant_id": 8,
"label": "Test value 22",
"value": "Test value 22"
},
{
"id": 69,
"variant_id": 8,
"label": "Test value 33",
"value": "Test value 33"
},
{
"id": 73,
"variant_id": 8,
"label": "Test value 44",
"value": "Test value 44"
}
]
}
]
handleVariants() {
const { action_type, product_id } = this.props;
const filter = { product_id: product_id };
const fetchData = action_type === 'create' ? this.props.getListVariantsTmp() : this.props.getListVariants(filter);
this.setState({ loadingVariantsTemp: true });
fetchData.then(res => {
const { data } = res;
console.log("data", data)
const determineWidth = (name) => {
switch (name) {
case 'Price':
return 80;
case 'Sku':
return 150;
default:
return 'auto';
}
};
const editableColumns = ['Price', 'Sku'];
const newColumns = data.map(variant => ({
title: variant.name,
dataIndex: variant.name,
key: variant.id,
width: determineWidth(variant.name),
render: (text, record, index) => {
const valueObject = variant.values[index];
if (variant.name === 'Color' && valueObject) {
const colorCode = variant.values[index].value;
return (
<>
<span style={{ background: colorCode }} className='item-color-variants'> </span>
{record[variant.name]} ({colorCode})
</>
)
} else if (variant.name === 'Status' && valueObject) {
const status = record[variant.name];
return (
<Switch
size="small"
defaultChecked={status === '1'}
onChange={(value) => this.props.updateVariantsTmp(record[variant.name + '_id'], { value })}
/>
)
} else {
return (
<span>{record[variant.name]}</span>
)
}
},
onCell: record => ({
record,
editable: editableColumns.includes(variant.name),
dataIndex: variant.name,
title: variant.name,
handleSave: this.handleSave,
handleChange: (value) => this.onChangeItem(variant.name, value, record[variant.name + '_id']),
}),
}));
newColumns.push({
title: '#',
key: 'actions',
width: 40,
render: (_, record) => (
<span>
<CloseOutlined onClick={() => this.openDeleteVariant(record.ids)} className='item-action-btn-remove' />
</span>
),
});
const rowData = [];
const maxLength = Math.max(...data.map(variant => variant.values.length));
for (let i = 0; i < maxLength; i++) {
const row = {};
const ids = [];
data.forEach(variant => {
const value = variant.values[i];
if (value) {
row[variant.name] = value.label || '';
row[`${variant.name}_id`] = value.id;
ids.push(value.id);
} else {
row[variant.name] = '';
row[`${variant.name}_id`] = '';
}
});
row['ids'] = ids;
rowData.push(row);
}
console.log("rowData", rowData)
// Cập nhật state
this.setState({
variants_columns: newColumns,
variants_data_source: rowData,
loadingVariantsTemp: false,
});
}).catch(error => {
console.error("Error fetching data:", error);
});
}
<Table
rowKey="ids"
size='small'
tableLayout='auto'
rowSelection={rowSelection}
columns={variants_columns}
dataSource={variants_data_source}
pagination={false}
loading={loadingVariantsTemp}
rowClassName={() => "editable-row"}
components={components}
style={{ marginTop: '20px' }}
locale={{ emptyText: "No data" }}
/>
Incorrect
Display correctly
