robust-apricot
robust-apricot6mo ago

Import page

Howdy, I want to create a page where I can - import a json file with a list of items - check if those items already exist - show the results of the compare in a table - accept the changes and update the db I thought that I would ask if anyone has done something similar?
5 Replies
kapa.ai
kapa.ai6mo ago
Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide some guidance based on the information available. For importing a JSON file, you might want to look into how to import CSV files as described in this guide (https://refine.dev/blog/how-to-import-csv/). The process for JSON would be similar, but you would need to parse the JSON data instead of CSV data. For checking if items already exist and updating the database, you would need to use refine's data provider methods. Unfortunately, the extracts provided do not contain specific examples of this. For displaying the results in a table, you can use refine's Table component. Here's an example of how to create a table from the documentation (https://refine.dev/blog/manage-hackathons-with-refine/):
import {
List,
Table,
useTable,
Space,
ShowButton,
EditButton,
TextField,
} from "@pankod/refine";

import dayjs from "dayjs";

import { HackathonType } from "interfaces";

export const HackathonsList: React.FC = () => {
const { tableProps } = useTable<HackathonType>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column
dataIndex="start"
title="Starts"
render={(value) => (
<TextField value={dayjs(value).format("DD/MMMM dddd")} />
)}
/>
<Table.Column
dataIndex="end"
title="Ends"
render={(value) => (
<TextField value={dayjs(value).format("DD/MMMM dddd")} />
)}
/>
<Table.Column
title="Actions"
dataIndex="actions"
render={(_text, record: HackathonType): React.ReactNode => {
return (
<Space>
<ShowButton size="small" recordItemId={record.id} hideText />
<EditButton size="small" recordItemId={record.id} hideText />
</Space>
);
}}
/>
</Table>
</List>
);
};
import {
List,
Table,
useTable,
Space,
ShowButton,
EditButton,
TextField,
} from "@pankod/refine";

import dayjs from "dayjs";

import { HackathonType } from "interfaces";

export const HackathonsList: React.FC = () => {
const { tableProps } = useTable<HackathonType>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column
dataIndex="start"
title="Starts"
render={(value) => (
<TextField value={dayjs(value).format("DD/MMMM dddd")} />
)}
/>
<Table.Column
dataIndex="end"
title="Ends"
render={(value) => (
<TextField value={dayjs(value).format("DD/MMMM dddd")} />
)}
/>
<Table.Column
title="Actions"
dataIndex="actions"
render={(_text, record: HackathonType): React.ReactNode => {
return (
<Space>
<ShowButton size="small" recordItemId={record.id} hideText />
<EditButton size="small" recordItemId={record.id} hideText />
</Space>
);
}}
/>
</Table>
</List>
);
};
This example shows a table with columns for ID, name, start, and end. You would need to adjust this to match the data in your JSON file. For more detailed information, I recommend checking out the refine documentation (https://refine.dev/docs/getting-started/overview/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6mo ago
<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below
Omer
Omer6mo ago
Hey @silentnyte , Perhaps you could take a look at https://csvbox.io or https://tableflow.com.
CSV Importer Tool for Web Apps, SaaS, and APIs | csvbox.io
A drop-in CSV import widget to allow your users to upload spreadsheets, map columns, and validate data all with a few clicks. You receive clean and ready to use data in your web app.
TableFlow | The open source CSV importer
TableFlow is an open source data import platform for companies to collect and transform customer data. Instead of building an in-house file upload and processing service, businesses can embed or link to TableFlow's customizable importer to manage their data onboarding needs.
robust-apricot
robust-apricot6mo ago
Are these built with refine?
Omer
Omer6mo ago
No