Search code examples
javascriptreactjsantd

Insert Icon on AntD Column Table based on Data Device

I have a problem here please anyone can help me? I have a trouble with Ant Design table here, in Source column here I want to insert Icon, I already have inserted an icon but I want the Icon change based on the data of the device, if device Id = 1 it would be "Human Icon" that will showed up, but if device id = 2 it would be "Computer Icon" that will show.

enter image description here

Here's the code :

import React, { useEffect, useState } from 'react';
import { Card, Col, Divider, Layout, Row, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Content, Footer, Header } from 'antd/lib/layout/layout';
import 'antd/dist/antd.css';
import '../Page/Dashboard.css';
import { LaptopOutlined, UserAddOutlined, UserOutlined } from '@ant-design/icons';

const columns = [
{
    title: "No",
    dataIndex: "id",
    key: "id",
},
{
    title: 'Device ID',
    dataIndex: "dev_id",
    key: "dev_id",
},
{
    title: 'Message ID',
    dataIndex: "msg_id",
    key: "msg_id",
},
{
    title: 'Time Stamp',
    dataIndex: "time_stamp",
    key: "time_stamp",
},
{
    title: 'RFID',
    dataIndex: "rfid",
    key: "rfid",
},
{
    title: 'Data Hewan',
    dataIndex: "animals",
    key: "animals",
},
{
    title: 'Weight (kg)',
    dataIndex: "weight",
    key: "weight",
},
{
    title: 'Temperature (Celcius)',
    dataIndex: "temp",
    key: "temp",
},
{
    title: 'Tags',
    dataIndex: "tags",
    key: "tags",
    render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = 'geekblue';
  
            if (tag === 'Invalid Data') {
                color = 'volcano';
            } else {
                color = 'geekblue';
            }
  
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
},
{
    title: 'Source',
    dataIndex: "",
    key: "",
    render: text => <UserOutlined />
}

];
export default function Dashboard(){
return (
     <Table column={columns} dataSource={dataQurban} />
)}

Thank you I hope you'll could help me!

Solution 
  • {
    title: 'Source',
    dataIndex: "",
    key: "",
    render: (_: any, record: any) => record.dev_id === 1 ? <UserOutlined /> : <ComputerIcon />
}

    The code above is the direct solution.

    You could aslo define a variable if you want to optimize the code.

    const iconObj = {
    1: <Icon1 />,
    2: <Icon2 />,
    3: <Icon3 />,
  // ...
}
// ...
{
    title: 'Source',
    dataIndex: "",
    key: "",
    render: (_, record) => iconObj[record.dev_id]
}