英文:
How to create dynamic column using react-data-grid
问题
以下是您要翻译的内容：
我在我的React应用中有一个LogsData：
const dailyLogsData = [{id: 1,date_created: "01/15/2023",time_updated: "15:53:05",usage_notes: "sample notes",maintenance_notes: "sample notes",devices: [{ device_name: "Port Engine", device_value: "0125", device_id: 1 },{ device_name: "Generator", device_value: "0252", device_id: 2 },{ device_name: "Water Maker", device_value: "0321", device_id: 3 },{ device_name: "Fuel Engine", device_value: "", device_id: 4 },{ device_name: "Radiator", device_value: "", device_id: 5 },],},{id: 2,date_created: "01/16/2023",time_updated: "15:53:05",usage_notes: "sample notes",maintenance_notes: "sample notes",devices: [{ device_name: "Port Engine", device_value: "0125", device_id: 1 },{ device_name: "Generator", device_value: "0252", device_id: 2 },{ device_name: "Water Maker", device_value: "0321", device_id: 3 },{ device_name: "Fuel Engine", device_value: "0321", device_id: 4 },{ device_name: "Radiator", device_value: "0321", device_id: 5 },],},];
我想在列中显示每个设备的名称，设备值应该在行中。
我有一个简单的解决方案，但我不知道如何获取每个设备的设备值：
const columns = dailyLogsData[0].devices.map((item) => ({key: item.device_name.replace(/ /g, ""),name: item.device_name.toUpperCase(),}));const columns2 = [{ key: "id", name: "ID" },{ key: "date_time", name: "DATE/TIME" },{ key: "usage_notes", name: "USAGE NOTES" },{ key: "maintenance_notes", name: "MAINTENANCE NOTES" },...columns,];const rows = dailyLogsData.map((item) => ({id: item.id,date_time: `${item.date_created} | ${item.time_updated}`,usage_notes: item.usage_notes,maintenance_notes: item.maintenance_notes,}));return(<DataGrid columns={columns2} rows={rows} />)
到目前为止的输出如下所示：
我正在使用这个NPM包获取额外信息：react-data-grid
英文:
I have a LogsData in my react App:
const dailyLogsData = [{id: 1,date_created: "01/15/2023",time_updated: "15:53:05",usage_notes: "sample notes",maintenance_notes: "sample notes",devices: [{ device_name: "Port Engine", device_value: "0125", device_id: 1 },{ device_name: "Generator", device_value: "0252", device_id: 2 },{ device_name: "Water Maker", device_value: "0321", device_id: 3 },{ device_name: "Fuel Engine", device_value: "", device_id: 4 },{ device_name: "Radiator", device_value: "", device_id: 5 },],},{id: 2,date_created: "01/16/2023",time_updated: "15:53:05",usage_notes: "sample notes",maintenance_notes: "sample notes",devices: [{ device_name: "Port Engine", device_value: "0125", device_id: 1 },{ device_name: "Generator", device_value: "0252", device_id: 2 },{ device_name: "Water Maker", device_value: "0321", device_id: 3 },{ device_name: "Fuel Engine", device_value: "0321", device_id: 4 },{ device_name: "Radiator", device_value: "0321", device_id: 5 },],},];
And I want to display each device name in a column and the device value should be in the row.
I have a simple solution, but I do not know how to get the device value for each device
const columns = dailyLogsData[0].devices.map((item) => ({key: item.device_name.replace(/ /g, ""),name: item.device_name.toUpperCase(),}));const columns2 = [{ key: "id", name: "ID" },{ key: "date_time", name: "DATE/TIME" },{ key: "usage_notes", name: "USAGE NOTES" },{ key: "maintenance_notes", name: "MAINTENANCE NOTES" },...columns,];const rows = dailyLogsData.map((item) => ({id: item.id,date_time: `${item.date_created} | ${item.time_updated}`,usage_notes: item.usage_notes,maintenance_notes: item.maintenance_notes,}));return(<DataGrid columns={columns2} rows={rows} />)
Here is the output so far:
I am using this NPM Package for additional info: react-data-grid
答案1
得分: 0
你可以按以下方式创建一个多重映射函数：
const rows = dailyLogsData.map((item) => {const row = {id: item.id,date_time: `${item.date_created} | ${item.time_updated}`,usage_notes: item.usage_notes,maintenance_notes: item.maintenance_notes,};item.devices.forEach((device) => {row[device.device_name.replace(/ /g, "")] = device.device_value;});return row;});
英文:
You can create a multiple map function as below here:
const rows = dailyLogsData.map((item) => {const row = {id: item.id,date_time: `${item.date_created} | ${item.time_updated}`,usage_notes: item.usage_notes,maintenance_notes: item.maintenance_notes,};item.devices.forEach((device) => {row[device.device_name.replace(/ /g, "")] = device.device_value;});return row;});``</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论