123Your first data view · Step 1 of 3
Load a table
You'll learn
- Decode CSV with
Bytes:csv - Count a table's rows
- Show data in a table
- Time
- 10 min
- File
view.lua
A small bakery keeps a week of its sales, Monday to Sunday, in a CSV file. In this step your app reads that file, counts its rows and shows them in a table.
Load the file
Make a folder for this tutorial. Inside it, save these rows as
data/sales.csv:
day,item,sold
1,Bread,42
1,Buns,18
1,Cake,6
2,Bread,38
2,Buns,22
2,Cake,5
3,Bread,45
3,Buns,20
3,Cake,9
4,Bread,40
4,Buns,25
4,Cake,7
5,Bread,52
5,Buns,31
5,Cake,12
6,Bread,61
6,Buns,40
6,Cake,21
7,Bread,55
7,Buns,36
7,Cake,25
Then save this program as view.lua, next to the data folder:
local data = datumhue.args.dirs.data
local sales = data:read("sales.csv"):csv()
print("rows: " .. sales:count())
In this example: datumhue.args Dir:read Bytes:csv DataHandle:count
Your app cannot open a path by itself. It reads files through handles
it is given when it starts. Run it with the data folder granted to
it under the name data:
$ datumhue run view.lua --dir data:data
It prints rows: 21 and keeps its empty window open until you close
it.
--dir data:datagrants the folderdata, read-only, under the name before the colon. Your app finds it indatumhue.argsand never sees the folder's path.Dir:readreturns the file as aByteshandle at once. The file is read when you decode it.Bytes:csvdecodes the bytes into aDataHandle, a table kept outside Lua. The first row of the file names its columns.DataHandle:countwaits for the file to load, then counts its rows.
Show it in a table
Replace the print with a page that shows the rows:
New line: local ui = datumhue.ui
local data = datumhue.args.dirs.data
local sales = data:read("sales.csv"):csv()
New line: local page = ui.root:panel({
New line: width = "100%",
New line: height = "100%",
New line: flex_direction = "column",
New line: padding = 16,
New line: gap = 12,
New line: })
New line: page:label({
New line: text = "Bakery sales: " .. sales:count() .. " rows",
New line: font_size = 20,
New line: })
New line: page:table({
New line: data = sales,
New line: columns = {
New line: { column = "day", label = "Day" },
New line: { column = "item", label = "Item" },
New line: { column = "sold", label = "Sold" },
New line: },
New line: flex_grow = 1,
New line: })
In this example: datumhue.ui datumhue.args Dir:read Bytes:csv datumhue.ui.root UiElement:panel UiElement:label DataHandle:count UiElement:table
Run it with the same command. A heading gives the row count, and the week's sales fill a table below it.
- The page is a panel that fills the window and stacks what it holds in a column, 12 UI px apart.
UiElement:tableshows aDataHandle, with one column for each entry incolumns. It reads only the rows in view and never copies the table into Lua.flex_grow = 1gives the table the room the heading leaves. It scrolls when its rows do not fit.
Try this
- Add
sortable = trueto the table, run it, and click a header. - Show the counts as "42 loaves", with the
formatof thesoldcolumn. - Add a day 8 to
sales.csvand run the program again.
Recap
- Your app reads files through handles it is granted.
--dir NAME:PATHputs a folder indatumhue.args.dirsunderNAME. Bytes:csvturns a file's bytes into aDataHandle, andDataHandle:countcounts its rows.UiElement:tableshows aDataHandleand reads only the rows on screen.
New in this step