Skip to content

Commit 0e5f6b1

Browse files
sawkasawka
committed
working on a backend table component
1 parent 0a3fc8f commit 0e5f6b1

6 files changed

Lines changed: 1964 additions & 0 deletions

File tree

‎tsunami/build/build.go‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,6 +430,16 @@ func tsunamiBuildInternal(opts BuildOpts) (*BuildEnv, error) {
430430
return buildEnv, fmt.Errorf("failed to create go.mod: %w", err)
431431
}
432432

433+
// Create symlink to SDK ui directory so Tailwind can see those classes
434+
uiLinkPath := filepath.Join(tempDir, "ui")
435+
uiTargetPath := filepath.Join(opts.SdkReplacePath, "ui")
436+
if err := os.Symlink(uiTargetPath, uiLinkPath); err != nil {
437+
return buildEnv, fmt.Errorf("failed to create ui symlink: %w", err)
438+
}
439+
if opts.Verbose {
440+
log.Printf("Created symlink: %s -> %s", uiLinkPath, uiTargetPath)
441+
}
442+
433443
// Generate Tailwind CSS
434444
if err := generateAppTailwindCss(tempDir, opts.Verbose); err != nil {
435445
return buildEnv, fmt.Errorf("failed to generate tailwind css: %w", err)

‎tsunami/demo/tabletest/app.go‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
package main
2+
3+
import (
4+
"fmt"
5+
6+
"github.com/wavetermdev/waveterm/tsunami/app"
7+
"github.com/wavetermdev/waveterm/tsunami/ui"
8+
"github.com/wavetermdev/waveterm/tsunami/vdom"
9+
)
10+
11+
// Sample data structure for the table
12+
type Person struct {
13+
Name string `json:"name"`
14+
Age int `json:"age"`
15+
Email string `json:"email"`
16+
City string `json:"city"`
17+
}
18+
19+
// Create the table component for Person data
20+
var PersonTable = ui.MakeTableComponent[Person]("PersonTable")
21+
22+
// Sample data
23+
var sampleData = []Person{
24+
{Name: "Alice Johnson", Age: 28, Email: "alice@example.com", City: "New York"},
25+
{Name: "Bob Smith", Age: 34, Email: "bob@example.com", City: "Los Angeles"},
26+
{Name: "Carol Davis", Age: 22, Email: "carol@example.com", City: "Chicago"},
27+
{Name: "David Wilson", Age: 41, Email: "david@example.com", City: "Houston"},
28+
{Name: "Eve Brown", Age: 29, Email: "eve@example.com", City: "Phoenix"},
29+
{Name: "Frank Miller", Age: 37, Email: "frank@example.com", City: "Philadelphia"},
30+
{Name: "Grace Lee", Age: 25, Email: "grace@example.com", City: "San Antonio"},
31+
{Name: "Henry Taylor", Age: 33, Email: "henry@example.com", City: "San Diego"},
32+
{Name: "Ivy Chen", Age: 26, Email: "ivy@example.com", City: "Dallas"},
33+
{Name: "Jack Anderson", Age: 31, Email: "jack@example.com", City: "San Jose"},
34+
}
35+
36+
// The App component is the required entry point for every Tsunami application
37+
var App = app.DefineComponent("App", func(_ struct{}) any {
38+
app.UseSetAppTitle("Table Test Demo")
39+
40+
// Define table columns
41+
columns := []ui.TableColumn[Person]{
42+
{
43+
AccessorKey: "Name",
44+
Header: "Full Name",
45+
Sortable: true,
46+
Width: "200px",
47+
},
48+
{
49+
AccessorKey: "Age",
50+
Header: "Age",
51+
Sortable: true,
52+
Width: "80px",
53+
},
54+
{
55+
AccessorKey: "Email",
56+
Header: "Email Address",
57+
Sortable: true,
58+
Width: "250px",
59+
},
60+
{
61+
AccessorKey: "City",
62+
Header: "City",
63+
Sortable: true,
64+
Width: "150px",
65+
},
66+
}
67+
68+
// Handle row clicks
69+
handleRowClick := func(person Person, idx int) {
70+
fmt.Printf("Clicked on row %d: %s from %s\n", idx, person.Name, person.City)
71+
}
72+
73+
// Handle sorting
74+
handleSort := func(column string, direction string) {
75+
fmt.Printf("Sorting by %s in %s order\n", column, direction)
76+
}
77+
78+
return vdom.H("div", map[string]any{
79+
"className": "max-w-6xl mx-auto p-6 space-y-6",
80+
},
81+
vdom.H("div", map[string]any{
82+
"className": "text-center",
83+
},
84+
vdom.H("h1", map[string]any{
85+
"className": "text-3xl font-bold text-white mb-2",
86+
}, "Table Component Demo"),
87+
vdom.H("p", map[string]any{
88+
"className": "text-gray-300",
89+
}, "Testing the Tsunami table component with sample data"),
90+
),
91+
92+
vdom.H("div", map[string]any{
93+
"className": "bg-gray-800 p-4 rounded-lg",
94+
},
95+
PersonTable(ui.TableProps[Person]{
96+
Data: sampleData,
97+
Columns: columns,
98+
OnRowClick: handleRowClick,
99+
OnSort: handleSort,
100+
DefaultSort: "Name",
101+
Selectable: true,
102+
Pagination: &ui.PaginationConfig{
103+
PageSize: 5,
104+
CurrentPage: 0,
105+
ShowSizes: []int{5, 10, 25},
106+
},
107+
}),
108+
),
109+
110+
vdom.H("div", map[string]any{
111+
"className": "text-center text-gray-400 text-sm",
112+
}, "Click on rows to see interactions. Try sorting by clicking column headers."),
113+
)
114+
})

‎tsunami/demo/tabletest/go.mod‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module tsunami/app/tabletest
2+
3+
go 1.24.6
4+
5+
require github.com/wavetermdev/waveterm/tsunami v0.0.0
6+
7+
require (
8+
github.com/google/uuid v1.6.0 // indirect
9+
github.com/outrigdev/goid v0.3.0 // indirect
10+
)
11+
12+
replace github.com/wavetermdev/waveterm/tsunami => /Users/mike/work/waveterm/tsunami

‎tsunami/demo/tabletest/go.sum‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
2+
github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
3+
github.com/outrigdev/goid v0.3.0 h1:t/otQD3EXc45cLtQVPUnNgEyRaTQA4cPeu3qVcrsIws=
4+
github.com/outrigdev/goid v0.3.0/go.mod h1:hEH7f27ypN/GHWt/7gvkRoFYR0LZizfUBIAbak4neVE=

0 commit comments

Comments
 (0)