table.tsx

import React, { useEffect } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { atom, useAtom } from 'jotai'
import { currentTableData } from './atoms';

interface DataType {
  Id: string;
  Jid: string;
  Name: string;
  Token: string;
  Webhook: string;
  Connected: number;
}

const AccountsTable = () => {
  const [tableData, setTableData] = useAtom(currentTableData)
 
  const handleLogout = async (token: string) => {
    const resp = await fetch("url");
  };

  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'Token',
      key: 'token',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Number',
      dataIndex: 'Jid',
      key: 'jid',
      render: (_, { Jid }) => (
        <>
          {
            Jid.split(":")[0]
          }
        </>
      ),
    },
    {
      title: 'State',
      key: 'Connected',
      dataIndex: 'Connected',
      render: (_, { Connected }) => (
        <>
          {
            (Connected === 1) ? <Tag color="green">Connected</Tag> : <Tag color="red">Disconnected</Tag>
          }
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>
            <Tag onClick={() => handleLogout(record.Token)} color="red">Logout</Tag>
          </a>
        </Space>
      ),
    },
  ];

  const fetchTableData = async () => {
    const sessions = await fetch("url")
    const { data } = JSON.parse(sessions);
    setTableData(data.Data);
    console.log(data.Data)
  };

  useEffect(() => {
    fetchTableData();
  }, [])

  return (
    <div className='p-5'>
      <Table pagination={false} columns={columns} dataSource={tableData} />
    </div>
  );
};

export default AccountsTable;