# Custom Component using PHP to read CSV? **URL:** \ **Category:** Elements API\ **Created:** [September 18, 2024, 2:56pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677 "2024-09-18T14:56:22Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 18, 2024, 2:56pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/1 "2024-09-18T14:56:22Z")
I have just put together a small elements webpage that has a custom component that uses PHP to read entries from a CSV file and output it into an HTML table. This is based on code partially generated by Cursor. I can get it work when I publish it to local website running under MAMP, because I can put the CSV in the website root. When I preview the site, how do I put a file into the preview website root? Is this possible? I don’t want to put the CSV file in Resources as I want it to be separate from the Elements publishing. ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 20, 2024, 3:17pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/2 "2024-09-20T15:17:51Z")
Here is a link to my Elements Project that I thought I would share, that demonstrates accessing data from a CSV file to populate an HTML Custom Component table: [Test\_7\_Seven\_PHP\_CSV](elementsapp://downloadDocument/0qHD5prVfE2v) It only works as a published website. I am using [MAMP PRO](https://www.mamp.info/en/mac/) to test it as it won’t work correctly in preview (as previously mentioned). In addition, because it is using PHP, the WYSIWYG editor can’t display the output although you do get a view of what the Custom HTML Component property options alter: ![properties_view](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/c/2ca93e21c4c25b469a9790ebb9ff809d7a92a2a6.png) You can configure the formatting of the table cell entries and any error message. The most important property is the CSV filename in order to select the csv data to display. This is the folder structure of the locally published project: ![published_file_structure](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/c/ccd284292333fb1eafe5997e5f8bfb88340e2746.png) You need to create one or more data files that you place in a **data** directory (see folder structure above). I created _empty_ name\_1.csv and name\_2.csv files, in order to test a csv file with no content. I then created two more files to contain a list of names as follows, to use on the two web pages: **names\_1.csv** ```auto John,Smith Emma,Johnson Michael,Williams Sophia,Brown David,Jones Olivia,Garcia James,Miller Ava,Davis Robert,Rodriguez Isabella,Martinez ``` **names\_2.csv** ```auto Liam,Wilson Sophia,Clark Noah,Walker Olivia,Hall Ethan,Young Ava,Allen Mason,King Isabella,Wright William,Scott Charlotte,Green James,Baker Amelia,Nelson Benjamin,Carter Mia,Mitchell Elijah,Perez Harper,Roberts Lucas,Turner Evelyn,Phillips Henry,Campbell Abigail,Parker ``` You can preview the project but you will get a missing file error. It is fairly basic but gives an idea how you can access CSV data by using a combination of Elements and PHP. The ouput should look like this: ![csv_webpage_output](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/2/9259b214a1b86217e1d430516d6fbbf7a9809a5c.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 23, 2024, 11:09am UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/3 "2024-09-23T11:09:44Z")
That is awesome and an excellent proof of concept for others to work from. Love it! ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 24, 2024, 5:40pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/4 "2024-09-24T17:40:50Z")
OK, here is the latest now generalised version! 😀 You can download it here: [CSV TABLE EXAMPLE](elementsapp://downloadDocument/o4gRkbwfWPmg) It can work on csv files external to Elements or using csv files stored in Resources of which examples are included. The advantage of using Resources (at least initially) is that you can test in Preview. The Custom Element is named **csvTable**. I have extended the Properties so that you can configure the Separator (default is a comma), Enclosure (default is double quotes) and Escape (default is backslash) for the CSV file. Additional Properties are available to set options (Text color, Background Color, Border Color, Alignment and Padding) independantly for the Table Header, Table Cells and Error messages (e.g. missing file) for the whole table. Additionally, you can add items to the **alignments** Collection to override the alignment for specific columns. In the Mac Models example Price has been overridden to be right aligned. Note: To change the colours of any of the Properties, you have to select a colour from a different theme colour band and then Elements will take note of it the colour you select. ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 24, 2024, 7:47pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/5 "2024-09-24T19:47:14Z")
Here is a preview of the example created Table using Beta 12: ![CleanShot 2024-09-24 at 20.44.53](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/a/ba22964334a065cbcf39732670506895c20282ec.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 24, 2024, 8:14pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/6 "2024-09-24T20:14:28Z")
That looks awesome! I’ve not dug into the project file (yet), but a quick Look at it gave me an error in the Editor and didn’t show the table in preview 🤔 ![CleanShot 2024-09-24 at 9 .13.24@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/c/eceeff13cf029d323c617e7a79368f672c21ef0c.jpeg) ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [September 24, 2024, 9:04pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/7 "2024-09-24T21:04:02Z")
Oops 😳 Looks like uploaded it with the filename in the Properties missing an e in mac\_models.csv. Correct that and it should work in preview? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [September 24, 2024, 9:19pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/8 "2024-09-24T21:19:03Z")
Thanks, that did the trick! Not sure how I didn’t notice the error 🤦 And here’s the working table in Preview… ![CleanShot 2024-09-24 at 10 .17.45@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/6/068b026e797d069645b5032b640c36926b685c67.png) ---
**Author:** ![SaturnWeb](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@SaturnWeb](https://forums.realmacsoftware.com/u/SaturnWeb)\ **Post date:** [June 10, 2026, 2:02pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/10 "2026-06-10T14:02:29Z")
Are you using a csv table with this? ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [June 10, 2026, 3:31pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/11 "2026-06-10T15:31:12Z")
Yes, it was just a csv file in the project 🙂 ---
**Author:** ![ercross](https://avatars.discourse-cdn.com/v4/letter/e/c57346/32.png) [@ercross](https://forums.realmacsoftware.com/u/ercross)\ **Post date:** [June 10, 2026, 3:46pm UTC](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/12 "2026-06-10T15:46:22Z")
That’s pretty cool!