usetable-live-mode

import React, { useState } from "react";
import {
  Row,
  Col,
  useTable,
  Table,
  DateField,
  Card,
} from "@pankod/refine-antd";
import { INotification } from "src/interfaces";


export const DashboardPage: React.FC = () => {
  const [eventCount, updateEventCount] = useState(0);

  const { tableProps } = useTable<INotification>({
    resource: "notifications",
    initialSorter: [
      {
        field: "created_at",
        order: "desc",
      },
    ],
    liveMode: "auto",
    onLiveEvent: (event) => {
      console.log(event);
      updateEventCount((prev) => prev + 1);
    },
  });

  return (
    <Row gutter={24}>
      <Col span={12}>
        <Card extra={eventCount.toString()} title="Notifications" headStyle={{ textAlign: "center" }}>
          <Table {...tableProps} rowKey="id">
            <Table.Column
              dataIndex="created_at"
              title="Created At"
              render={(value) => (
                <DateField format="YYYY-MM-DDTHH:mm:ss[Z]" value={value} />
              )}
            />
            <Table.Column dataIndex="level" title="Severity" />
            <Table.Column dataIndex="heading" title="Subject" />
            <Table.Column dataIndex="message" title="Message" />
          </Table>
        </Card>
      </Col>
    </Row>
  );
};

import React, { useState } from "react";
import {
  Row,
  Col,
  useTable,
  Table,
  DateField,
  Card,
} from "@pankod/refine-antd";
import { INotification } from "src/interfaces";


export const DashboardPage: React.FC = () => {
  const [eventCount, updateEventCount] = useState(0);

  const { tableProps } = useTable<INotification>({
    resource: "notifications",
    initialSorter: [
      {
        field: "created_at",
        order: "desc",
      },
    ],
    liveMode: "auto",
    onLiveEvent: (event) => {
      console.log(event);
      updateEventCount((prev) => prev + 1);
    },
  });

  return (
    <Row gutter={24}>
      <Col span={12}>
        <Card extra={eventCount.toString()} title="Notifications" headStyle={{ textAlign: "center" }}>
          <Table {...tableProps} rowKey="id">
            <Table.Column
              dataIndex="created_at"
              title="Created At"
              render={(value) => (
                <DateField format="YYYY-MM-DDTHH:mm:ss[Z]" value={value} />
              )}
            />
            <Table.Column dataIndex="level" title="Severity" />
            <Table.Column dataIndex="heading" title="Subject" />
            <Table.Column dataIndex="message" title="Message" />
          </Table>
        </Card>
      </Col>
    </Row>
  );
};