manual-pink•9mo 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•9mo 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•9mo ago

<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below

Omer•9mo 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.

manual-pink•9mo ago

Are these built with refine?

Omer•9mo ago