FlowyLabs/explore-go-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render a nice table as an example

Browse Source
This commit is contained in:
talksik
2025-11-09 13:52:57 -08:00
parent 4138e72f63
commit 5f0b4a83db
1 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/main.go
+65 -2
View File
@@ -12,14 +12,77 @@ func main() {
http.HandleFunc("/data", func(w http.ResponseWriter, req *http.Request) {
w.WriteHeader(200)
const tpl = `
<p>Hey check out the data</p>
<div class="w-full p-6">
<div class="overflow-hidden rounded-lg border border-gray-200 shadow-md">
<table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-4 font-medium text-gray-900">Name</th>
<th scope="col" class="px-6 py-4 font-medium text-gray-900">Email</th>
<th scope="col" class="px-6 py-4 font-medium text-gray-900">Role</th>
<th scope="col" class="px-6 py-4 font-medium text-gray-900">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 border-t border-gray-100">
{{range .Users}}
<tr class="hover:bg-gray-50">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white font-semibold">
{{.Initials}}
</div>
<div class="font-medium text-gray-700">{{.Name}}</div>
</div>
</td>
<td class="px-6 py-4">{{.Email}}</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600">
{{.Role}}
</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1 rounded-full {{.StatusClass}} px-2 py-1 text-xs font-semibold">
<span class="h-1.5 w-1.5 rounded-full {{.StatusDotClass}}"></span>
{{.Status}}
</span>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</div>
`
t, err := template.New("default").Parse(tpl)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
err = t.Execute(w, nil)
type User struct {
Name string
Initials string
Email string
Role string
Status string
StatusClass string
StatusDotClass string
}
data := struct {
Users []User
}{
Users: []User{
{Name: "Sarah Chen", Initials: "SC", Email: "sarah.chen@example.com", Role: "Engineering", Status: "Active", StatusClass: "bg-green-50 text-green-600", StatusDotClass: "bg-green-600"},
{Name: "Marcus Johnson", Initials: "MJ", Email: "marcus.j@example.com", Role: "Product", Status: "Active", StatusClass: "bg-green-50 text-green-600", StatusDotClass: "bg-green-600"},
{Name: "Emma Rodriguez", Initials: "ER", Email: "emma.r@example.com", Role: "Design", Status: "Away", StatusClass: "bg-yellow-50 text-yellow-600", StatusDotClass: "bg-yellow-600"},
{Name: "James Wilson", Initials: "JW", Email: "james.w@example.com", Role: "Marketing", Status: "Active", StatusClass: "bg-green-50 text-green-600", StatusDotClass: "bg-green-600"},
{Name: "Priya Patel", Initials: "PP", Email: "priya.p@example.com", Role: "Sales", Status: "Inactive", StatusClass: "bg-gray-50 text-gray-600", StatusDotClass: "bg-gray-400"},
{Name: "Alex Kim", Initials: "AK", Email: "alex.kim@example.com", Role: "Engineering", Status: "Active", StatusClass: "bg-green-50 text-green-600", StatusDotClass: "bg-green-600"},
},
}
err = t.Execute(w, data)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return