feat: base table component

ZEISS · Feb 26, 2024 · ce7c188 · ce7c188
1 parent ad3a9c2
commit ce7c188
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 7 deletions.
diff --git a/components/tables/tables.go b/components/tables/tables.go
@@ -3,31 +3,73 @@ package tables
 import htmx "github.com/zeiss/fiber-htmx"
 
 // TableProps is a struct that contains the properties of a table
-type TableProps struct {
+type TableProps[R comparable] struct {
 	ClassName htmx.ClassNames
-	Columns   Columns
+	Columns   Columns[R]
+	Rows      Rows[R]
+}
+
+// Rows ...
+type Rows[R comparable] struct {
+	Data []R
+}
+
+// NewRows ...
+func NewRows[R comparable](data []R) Rows[R] {
+	return Rows[R]{
+		Data: data,
+	}
+}
+
+// Insert ...
+func (r *Rows[R]) Insert(data R) {
+	r.Data = append(r.Data, data)
+}
+
+// ValueByIndex ...
+func (r *Rows[R]) ValueByIndex(index int) R {
+	if index >= len(r.Data) {
+		panic("Index out of range")
+	}
+
+	return r.Data[index]
+}
+
+// GetAll ...
+func (r *Rows[T]) GetAll() []T {
+	return r.Data
 }
 
 // Columns ...
-type Columns []ColumnDef
+type Columns[R comparable] []ColumnDef[R]
 
 // ColumnDef ...
-type ColumnDef struct {
+type ColumnDef[R comparable] struct {
 	ID              string
 	AccessorKey     string
-	Header          func(p TableProps) htmx.Node
-	Cell            func(p TableProps) htmx.Node
+	Header          func(p TableProps[R]) htmx.Node
+	Cell            func(p TableProps[R], row R) htmx.Node
 	EnableSorting   bool
 	EnableFiltering bool
 }
 
 // Table is a struct that contains the properties of a table
-func Table(p TableProps, children ...htmx.Node) htmx.Node {
+func Table[R comparable](p TableProps[R], children ...htmx.Node) htmx.Node {
 	headers := []htmx.Node{}
 	for _, column := range p.Columns {
 		headers = append(headers, column.Header(p))
 	}
 
+	rows := []htmx.Node{}
+	for _, row := range p.Rows.Data {
+		cells := []htmx.Node{}
+		for _, column := range p.Columns {
+			cells = append(cells, column.Cell(p, row))
+		}
+		rows = append(rows, htmx.Tr(cells...))
+
+	}
+
 	return htmx.Table(
 		htmx.ClassNames{
 			"table": true,
@@ -37,5 +79,8 @@ func Table(p TableProps, children ...htmx.Node) htmx.Node {
 				headers...,
 			),
 		),
+		htmx.TBody(
+			rows...,
+		),
 	)
 }
diff --git a/examples/main.go b/examples/main.go
@@ -4,6 +4,7 @@ import (
 	"context"
 	"log"
 	"os"
+	"strconv"
 
 	"github.com/gofiber/fiber/v2"
 	"github.com/katallaxie/pkg/logger"
@@ -15,6 +16,7 @@ import (
 	"github.com/zeiss/fiber-htmx/components/collapsible"
 	"github.com/zeiss/fiber-htmx/components/dropdowns"
 	"github.com/zeiss/fiber-htmx/components/forms"
+	"github.com/zeiss/fiber-htmx/components/tables"
 )
 
 // Config ...
@@ -27,6 +29,12 @@ type Flags struct {
 	Addr string
 }
 
+// DemoRow ...
+type DemoRow struct {
+	ID   int
+	Name string
+}
+
 var cfg = &Config{
 	Flags: &Flags{},
 }
@@ -386,6 +394,46 @@ var indexPage = htmx.HTML5(htmx.HTML5Props{
 					),
 				),
 			),
+			htmx.Div(
+				tables.Table[DemoRow](
+					tables.TableProps[DemoRow]{
+						Columns: tables.Columns[DemoRow]{
+							{
+								ID:          "id",
+								AccessorKey: "ID",
+								Header: func(p tables.TableProps[DemoRow]) htmx.Node {
+									return htmx.Th(htmx.Text("ID"))
+								},
+								Cell: func(p tables.TableProps[DemoRow], row DemoRow) htmx.Node {
+									return htmx.Td(
+										htmx.Text(strconv.Itoa(row.ID)),
+									)
+								},
+							},
+							{
+								ID:          "name",
+								AccessorKey: "Name",
+								Header: func(p tables.TableProps[DemoRow]) htmx.Node {
+									return htmx.Th(htmx.Text("Name"))
+								},
+								Cell: func(p tables.TableProps[DemoRow], row DemoRow) htmx.Node {
+									return htmx.Td(htmx.Text(row.Name))
+								},
+							},
+						},
+						Rows: tables.NewRows[DemoRow]([]DemoRow{
+							{
+								ID:   1,
+								Name: "Name 1",
+							},
+							{
+								ID:   2,
+								Name: "Name 2",
+							},
+						}),
+					},
+				),
+			),
 		),
 	},
 }.WithContext(&fiber.Ctx{}))