usetable-live-mode

here is the page for reference:

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>
  );
};

7 Replies

Omer•3y ago

Hey 👋, Thank you so much for reaching out to us. We will check and contact you within the day! Now I tried it with our Supabase example and it worked. Are all your refine dependencies at the latest version? Because we recently fixed a bug with live mode - https://github.com/pankod/refine/releases/tag/v3.8.4

compatible-crimson•3y ago

using 3.8.3 will update and test yeah that seems to have solved it, thanks @Omer

Omer•3y ago

Cool 🎉🎊

compatible-crimson•3y ago

Quick follow up, does the user need to handle the unsubscribe on page leave? Do we have to implement an effect on unmount to do it?

Omer•3y ago

No, we do it automatically 🚀

Omer•3y ago

https://github.com/pankod/refine/blob/master/packages/core/src/hooks/live/useResourceSubscription/index.ts#L70

GitHub

refine/index.ts at master · pankod/refine

A React-based framework for building internal tools, rapidly. - refine/index.ts at master · pankod/refine

compatible-crimson•3y ago

sweet thanks!