9. Import Excel in Material Table | Material UI

Подписаться 7 тыс.

Просмотров 19 тыс.

50% 1

Import excel, csv file data to Material Table | Material UI
Hey Guys,
In this video we will see How to import excel and csv data to material table. and file type validation also will be implemented. This video is for absolute beginner.
Add package XLSX:
npm install xlsx
or
yarn add xlsx
GitHub URL for code :
github.com/vikas62081/materia...
#import #excel #React

Опубликовано:

26 мар 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@rogercardona4160 2 года назад

You explain beautifully! It is crystal clear, thank you so much for that, please keep it up my friend!

@Codenemy 2 года назад

It's my pleasure, Thanks for watching :)

@khandoor7228 3 года назад

Your content is amazing and I am loving this series!! I am very glad i subscribed.

@Codenemy 3 года назад

Thanks for your comment, It means a lot... :)

@yogeshrajput5712 2 года назад

Cool bhai this is very helpful content 👍👍👍👍

@Codenemy 2 года назад

Glad to hear that from you, Thanks for watching :)

@mdzahidhasan206 2 года назад

Thanks for the video,it helps me a lot. Please let me know how to add style in table header and render rowData after import the excel file?

@Codenemy 2 года назад

you have two options: 1. for column header - column.headerStyle 2. for row header - options.headerStyle For excel file styling pls have a look on Docs www.npmjs.com/package/xlsx

@yowanicosta5185 2 года назад

I am getting this error: "TypeError: Cannot read properties of undefined (reading 'read')". can you help me to get around that?

@zjstudio5670 Год назад

how to use render column after import excel?

@romanpfaffli9306 2 года назад

Loved this. Really well done! Do you have any idea how or if we can import PdF Data in Material Table? x

@Codenemy 2 года назад

Initially you need to read pdf file from react, Have a look on this npm package called pdfreader

@Sso1337 2 года назад

thank you so much

@Codenemy 2 года назад

It's my pleasure, Thanks for watching :)

@calebwang723 2 года назад

How can I add the csv on top of existing table and make them into the state when you do editing ?

@Codenemy 2 года назад

Are you looking to replace existing data ?

@deyajean9444 3 года назад

thanks you very much.Please make a video where we can import these csv data into a database through an API for example.

@Codenemy 3 года назад

you can import csv file too here. To insert into database stringify this object and pass as body :)

@deyajean9444 3 года назад

@@Codenemy thanks you.I will try and come back to you.

@Codenemy 3 года назад

@@deyajean9444 you r always welcome :)

@deyajean9444 3 года назад

@@Codenemy thanks very much.I did it .I'm so happpppppppy!!!!!!!I can import my data through my API!!

@Codenemy 3 года назад

@@deyajean9444 Of course, It's my pleasure :)

@ahmedibrahim4059 2 года назад

Thank for the Video, When I run the code I catch the following error. Can you please help with that? Attempted import error: 'xlsx' does not contain a default export (imported as 'XLSX')

@Codenemy 2 года назад

Could you pls try this import * as XLSX from 'xlsx/xlsx.mjs';

@helloworld972 3 года назад

Sir when I import data first I want to edit it and then upload it to db.how to do that?

@Codenemy 3 года назад

while importing let's upload the data to db and on edit let's update those.

@KhachikYetenekyan 2 года назад

I followed both the excel and filtering videos. They both work, but for some reason it doesn’t show all the data at once. I have to click through the different filter options then click “All” again for all the data to show up.

@Codenemy 2 года назад

yeah you are right, In order to use both, post import set filter value to ALL and render all data. Hope it resolve your issue :)

@KhachikYetenekyan 2 года назад

@@Codenemy is there any way to have the data show up without pressing All again? That it displays right when the excel sheet is imported?

@Codenemy 2 года назад

@@KhachikYetenekyan yes, that is what is i mentioned, after import at-last set filter state to ALL

@KhachikYetenekyan 2 года назад

Thank you so much for this! Helped out a lot and very clear! Is there a way to upload the data from the excel to Google Firebase/Firestore?

@Codenemy 2 года назад

you can do that, check how to store many record at a time in firebase

@vimal5363 2 года назад

Attempted import error: 'xlsx' does not contain a default export (imported as 'XLSX'). how to resolve it

@Codenemy 2 года назад

could you pls check gitHub link and do npm install

@abhijeetshikharvlog1444 3 года назад

What happened if columns value null it crashed how can u handled

@Codenemy 3 года назад

I tried and it's working, Could you plz send me excel sheet on fb. facebook.com/codenemy

@seemapandey4782 2 года назад

It is not reading date values properly... Could you pls guide what we can do to get date values correctly?

@Codenemy 2 года назад

could you pls debug where are we converting excel into json and print those json and have a look.

@th1sman 2 года назад

I'm working on it too, the problem is that the date is converted to a timestamp of 1970.

@Codenemy 2 года назад

@@th1sman can you pls check xlsx documentation

@debarshipal8275 3 года назад

Hi I followed your video and am successfully able to import the file. I have a question. How can I convert the input file as a free action in material table. Like a button beside search to import the file rather than keeping it out of the table. Thanks for the tutorial. Really appreciate your efforts

@Codenemy 3 года назад

Glad to hear that, Now you can follow below link github.com/vikas62081/material-table-YT/tree/toolbarOverride Anyhow very soon i am gonna to upload video about that. if you got stuck plz let me know :)

@debarshipal8275 3 года назад

@@Codenemy Can you give me a better example. I am confused because all the other actions are also getting overrided. Here is the code I tried:- actions={[ { icon: 'upload', tooltip: 'Upload File', isFreeAction: true, } ]} components={{ Action: (props) => { if(props.action.icon === 'upload') return () } }}

@Codenemy 3 года назад

ok let's do one thing, remove components completely ans replace actions with this code actions=[{your other actions }, { icon: props => ( ), tooltip: "Import Excel", isFreeAction: true, onClick: (event, rowData) => //here logic ti import data },] if you still stuck, plz let me know :)

@debarshipal8275 3 года назад

@@Codenemy Thanks for the solution it worked.

@Codenemy 3 года назад

@@debarshipal8275 Good to hear Thanks :)

@mohamedboularas6480 2 года назад

hello, i love your content, i want to now if this method save data to dataBase i use mongodb?? thanks...

@Codenemy 2 года назад

I am glad to hear that, sure will do that :)

@deepakkathuria1079 2 года назад

I dont want to upload i want to read csv data only in table form and my csv data is coming in form of object how do i read or preview it in the form of material table or table

@Codenemy 2 года назад

While reading csv data it will provide you object. Now you can assign to the table data but make sure object is type of array

@deepakkathuria1079 2 года назад

@@Codenemy ok thanks one more can we apply valiation in each cell in material table and can we nake dynamic no of columns

@apurvapawar3986 2 года назад

What is material table?it's throwing me an error material-table is not defined

@Codenemy 2 года назад

make sure you are installing latest version of both material table & material ui

@abhisheksharma9279 3 года назад

How to change the position of pagination, i want in left side

@Codenemy 3 года назад

Have a look here how to override pagination component ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Tq92gp_nRfs.html let's replace TablePagination with this and it will work If you got stuck plz let me know :)

@abhisheksharma9279 3 года назад

@@Codenemy thnks man👍

@Codenemy 3 года назад

@@abhisheksharma9279you are welcome :)

@sanketgole4199 3 года назад

Make video on material ui design application single page

@Codenemy 3 года назад

Already uploaded. Have a look here ru-vid.com/group/PLqhnP4YYLcb42tspfdEojGp3Wdbal4rGI This is a SPA application without material UI design.

@kalpeshwani231 2 года назад

Sir, excel sheet records converted to the Excel sheet and how to store this records in MongoDb database using NodeJs please make the vedio

@Codenemy 2 года назад

sure

@kalpeshwani231 2 года назад

@@Codenemy please make it fast

@urbanadventures2023 2 года назад

@@Codenemy Did you make it? I need it too.

@Codenemy 2 года назад

@@urbanadventures2023 sure

@supunprabasara7019 2 года назад

If the web page is refresh the uploaded data is gone.can you create a video how to upload that to mongo db

@Codenemy 2 года назад

sure, Thanks for suggestion :)

@LearnOnTime1 Год назад

@@Codenemy if you have video on "import csv file from computer and upload file data in mongodb " kindly share link with me .its very helpful for me.

@mansilaad2062 3 года назад

Hey plz make video on action buttons in material ui

@Codenemy 3 года назад

which type of content would you like, Because already i have a playlist of all have a look ru-vid.com/group/PLqhnP4YYLcb7pDYWy_Y0baGkklpqXd9Sd specially 6 and 7 :)

@mansilaad2062 3 года назад

@@Codenemy on action buttons there is not any video

@Codenemy 3 года назад

@@mansilaad2062 have a look ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aKxcJ660tv0.html

@subikshasriram1745 2 года назад

Hai I am working on this video it's help me a lot..but I am facing some problem it showing a error "imported as "XLSV" was not found in'xlsx' why I am getting like that..

@subikshasriram1745 2 года назад

I install npm install xlsx

@subikshasriram1745 2 года назад

But it's getting an error why it's happening

@Codenemy 2 года назад

@@subikshasriram1745 there might be problem in installation, pls remove node_modules and do npm install

@subikshasriram1745 2 года назад

Ok thank u

@Dimidrol14 Год назад

ok?

@Codenemy Год назад

🙂

@aramabdulrahman2087 3 года назад

thanks alots... please Make export custom checked selected item to csv. , and how to implement the same things with ( react-admin-import-csv package )....git rep.. github.com/benwinding/react-admin-import-csv