### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 12:04am UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/1 "2019-07-11T00:04:12Z")
Hello everyone. Completely new to P5JS. I am trying to create a table and populate it with data already collected by the same code.The table will have three columns: name, position\_x, and position\_y.
The code below didn’t get me any errors. However, I am not sure if it is correct.
let name;
let position\_x;
let position\_y;
let myTable = new p5.Table([name,let position\_x,let position\_y]);
So, if coding below is correct, how do I tell P5js to start reading my previously storaed data and place it on my myTable one row at the time?
Sorry if I am not clear enough.
Thanks
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 11, 2019, 3:06am UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/2 "2019-07-11T03:06:02Z")
hi, tables with p5.js see
> **[reference | p5.js](https://p5js.org/reference/#/p5.Table)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
> **[reference | p5.js](https://p5js.org/reference/#/p5.TableRow)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
when you go to the shown **Methods** you also get examples.
generally, you should
- create your table first and store your data into it
- and optionally save it to your local computer
- later also can upload a CSV file to the server and reuse that
> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/gS6rTLKYS)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
> [@hbtousa](#):
>
> with data already collected by the same code
but if you have data already as ?array?
you might copy them to rows…
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 11, 2019, 8:22am UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/3 "2019-07-11T08:22:09Z")
I’ve made a sketch that stores and reads an array of CSV row strings from the browser’s local storage using **storeItem()** & **getItem()** respectively; then converts that array to p5.TableRow objects; and finally use p5.Table::**addRow()** to populate a p5.Table container: 🗂
1. [http://p5js.org/reference/#/p5/getItem](http://p5js.org/reference/#/p5/getItem)
2. [http://p5js.org/reference/#/p5.Table/addRow](http://p5js.org/reference/#/p5.Table/addRow)
Each mouse click adds a new p5.TableRow to the p5.Table container, updating the browser’s local storage as well. 🖱
Middle-click it in order to clear the p5.Table & browser’s local storage: 🧹
1. [http://p5js.org/reference/#/p5.Table/clearRows](http://p5js.org/reference/#/p5.Table/clearRows)
2. [http://p5js.org/reference/#/p5/removeItem](http://p5js.org/reference/#/p5/removeItem)
This sketch can be checked running online at the link below: 🔗
> **[Populate Table from Local Storage](https://bl.ocks.org/GoSubRoutine/dabbc9371441720a07bd5de513a6b890)**
>
> GoSubRoutine’s Block dabbc9371441720a07bd5de513a6b890
>
```auto
/**
* Populate Table from Local Storage (v1.0.2)
* GoToLoop (2019-Jul-11)
*
* Discourse.Processing.org/t/creating-and-populating-a-table-from-scratch/12658/3
* Bl.ocks.org/GoSubRoutine/dabbc9371441720a07bd5de513a6b890
*/
'use strict';
const A_ASCII = 'A'.charCodeAt(),
Z_ASCII = 'Z'.charCodeAt(),
HASH = '#', COMMA = ',',
STORAGE_NAME = 'MyCSVTableRows',
SAVE_NAME = 'MyTable.csv',
ALL_COLORS = 0x1000;
let table;
function setup() {
createCanvas(200, 200).mousePressed(addRandomRow);
noLoop();
(table = new p5.Table).columns = ['name', 'x', 'y'];
const storage = getItem(STORAGE_NAME);
storage && populateTableFromStorage(table, storage);
console.log(table);
}
function draw() {
background(HASH + hex(~~random(ALL_COLORS), 3));
}
function addRandomRow() {
if (mouseButton === CENTER) return emptyTableAndItsStorage(table);
const tr = table.addRow();
tr.set(0, String.fromCharCode(random(A_ASCII, Z_ASCII + 1)));
tr.set(1, ~~random(width));
tr.set(2, ~~random(height));
console.log(tr);
storeItem(STORAGE_NAME, prepareTableRowsForStorage(table));
redraw();
}
function emptyTableAndItsStorage(t) {
t.clearRows();
removeItem(STORAGE_NAME);
return t;
}
function populateTableFromStorage(t, arr) {
for (const s of arr) t.addRow(new p5.TableRow(s));
return t;
}
function prepareTableRowsForStorage({ rows }) {
return rows.map(tableRowsToStorageConvertor);
}
function tableRowsToStorageConvertor({ arr }) {
return arr.join();
}
```
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 1:19pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/4 "2019-07-11T13:19:00Z")
Thanks very much for your quick and extense response. I will get to your code and adjust it to the one I have. I really appreciate the time you took helping me. Once again Thanks
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 1:21pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/5 "2019-07-11T13:21:08Z")
Hello and thanks for your input. I am new to P5JS and I will go over your code to understand it and to incorporate it to mine. Thanks for sharing what you know.Cheers.
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 1:36pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/6 "2019-07-11T13:36:48Z")
> [@kll](#):
>
> but if you have data already as ?array?
> you might copy them to rows…
Yes, the data is already provided by the code, which reads “some predefined” pixels from an image in the form of [name, posx,posy]. What I m looking for is to store those specific pixels to a CSV file. I noticed your code requires the mouse to add rows and the keyboard to save the file when “s” is pressed. Is there anyway to feed the table with those specific pixels without the user’s input?
Thanks very much,
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 11, 2019, 1:42pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/7 "2019-07-11T13:42:32Z")
yes,
- loop over your data ?array?
- make and use inthere a new
function add\_row\_from\_data(){}
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 2:16pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/8 "2019-07-11T14:16:52Z")
 With your first code I was able to “manually” feed the table. Where should I placed the function?
> [@kll](#):
>
> function add\_row\_from\_data(){}
. I placed it at the end of the code and it gave me an error. I had to redo the entire code because I didn’t save it. The browser crashed probably due to the long CSV file. Not sure . Thanks
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 11, 2019, 2:32pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/9 "2019-07-11T14:32:17Z")
amh, not get the CSV file thing,
if you have that data as a CSV file already the whole question makes no sense.
you not say how you get that data into what kind of array
you not link to your working/testing online project
* * *
the place of the function inside the sketch.js file does not matter
( as long it is not inside a other function…)
but the valid question is from where you call it?
as you not want any user interaction,
you must call it directly after the
> [@hbtousa](#):
>
> data is already provided by the code
without make your project available it is very difficult to help,
and i did write for you a set of functions regarding table already to give you a start…
now you just have to feed other data?
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 11, 2019, 9:51pm UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/10 "2019-07-11T21:51:02Z")
Sorry I was out of my base, but I’m back. I commented out line 67 because I don’t know where exactly to place it. [https://editor.p5js.org/hbtousa/sketches/sn1QLACNg](https://editor.p5js.org/hbtousa/sketches/sn1LACNg)
I will rephrase the question, or the problem, I have and the reason why I didn’t mention the CSV part first. Since the code provides the data, I thought building a table off it was a basic task. With a table fully loaded I wouldn’t see a problem saving the data as CSV file it to my local PC.but, as of right now still digging to get it done. Sorry for all the inconvenience.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [July 12, 2019, 12:49am UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/11 "2019-07-12T00:49:01Z")
sorry, can not run it here ( very low end hardware )
yes, loading a empty table with header replaces the
create\_table.
and use that
```auto
my_table = loadTable('empty.csv', 'csv', 'header');
//.. and later
saveTable(my_table, 'with_data.csv');
```
is a very good idea
* * *
but in line 67 i not see any disabled code.
good luck
---
### Author:  [@hbtousa](https://discourse.processing.org/u/hbtousa)
#### Post date: [July 12, 2019, 4:13am UTC](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/12 "2019-07-12T04:13:55Z")
Thanks very much. I got it working. The code creates a new table, add rows, and saves a table as CSV file type. One thing I noticed on my code when saving the data
```auto
function mousePressed() {
save_my_table();
}
```
works better than the function below.
`function keyPressed() { if ( key == 's' ) save_my_table(); }`
Thanks