probable-pink
probable-pinkโ€ข3y ago

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
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
ratty-blush
ratty-blushโ€ข3y ago
using 3.8.3 will update and test yeah that seems to have solved it, thanks @Omer
Omer
Omerโ€ข3y ago
Cool ๐ŸŽ‰๐ŸŽŠ
ratty-blush
ratty-blushโ€ข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
Omerโ€ข3y ago
No, we do it automatically ๐Ÿš€
Omer
Omerโ€ข3y ago
GitHub
refine/index.ts at master ยท pankod/refine
A React-based framework for building internal tools, rapidly. - refine/index.ts at master ยท pankod/refine
ratty-blush
ratty-blushโ€ข3y ago
sweet thanks!

Did you find this page helpful?