Table

package table

props {
  // Class adds classes to the table element.
  Class    string = ""
  // Children is the content of the table: the caption, header, body and footer.
  Children gx.Node
  // Attrs adds HTML attributes to the table element.
  Attrs    gx.Attrs = nil
}

<div data-slot="table-container" class="relative w-full overflow-x-auto">
  <table data-slot="table" class={gx.Cx("w-full caption-bottom text-sm", p.Class)} {...p.Attrs}>{p.Children}</table>
</div>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the rows of the header.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<thead data-slot="table-header" class={gx.Cx("[&_tr]:border-b", p.Class)} {...p.Attrs}>{p.Children}</thead>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the rows of the body.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<tbody data-slot="table-body" class={gx.Cx("[&_tr:last-child]:border-0", p.Class)} {...p.Attrs}>{p.Children}</tbody>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the rows of the footer.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<tfoot data-slot="table-footer" class={gx.Cx("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", p.Class)} {...p.Attrs}>{p.Children}</tfoot>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the cells of the row.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<tr data-slot="table-row" class={gx.Cx("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", p.Class)} {...p.Attrs}>{p.Children}</tr>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the header cell.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<th data-slot="table-head" class={gx.Cx("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has(:is([role=checkbox],input[type=checkbox],label:has(>input[type=checkbox])))]:pr-0 [&>:is([role=checkbox],input[type=checkbox],label:has(>input[type=checkbox]))]:translate-y-[2px]", p.Class)} {...p.Attrs}>{p.Children}</th>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the cell.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<td data-slot="table-cell" class={gx.Cx("p-2 align-middle whitespace-nowrap [&:has(:is([role=checkbox],input[type=checkbox],label:has(>input[type=checkbox])))]:pr-0 [&>:is([role=checkbox],input[type=checkbox],label:has(>input[type=checkbox]))]:translate-y-[2px]", p.Class)} {...p.Attrs}>{p.Children}</td>

package table

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the caption text.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<caption data-slot="table-caption" class={gx.Cx("mt-4 text-sm text-muted-foreground", p.Class)} {...p.Attrs}>{p.Children}</caption>

package table

import "github.com/alternayte/gx"

// invoiceRows are the body rows of the table fixtures.
func invoiceRows() gx.Node {
	return gx.Frag(
		TableRow(TableRowProps{Children: gx.Frag(
			TableCell(TableCellProps{Children: gx.Text("INV-001")}),
			TableCell(TableCellProps{Children: gx.Text("Paid")}),
			TableCell(TableCellProps{Children: gx.Text("$120.00")}),
		)}),
		TableRow(TableRowProps{Children: gx.Frag(
			TableCell(TableCellProps{Children: gx.Text("INV-002")}),
			TableCell(TableCellProps{Children: gx.Text("Open")}),
			TableCell(TableCellProps{Children: gx.Text("$80.00")}),
		)}),
	)
}

// invoiceHead is the header row of the table fixtures.
func invoiceHead() gx.Node {
	return TableHeader(TableHeaderProps{Children: TableRow(TableRowProps{Children: gx.Frag(
		TableHead(TableHeadProps{Children: gx.Text("Invoice")}),
		TableHead(TableHeadProps{Children: gx.Text("Status")}),
		TableHead(TableHeadProps{Children: gx.Text("Amount")}),
	)})})
}

var TableFixtures = gx.Fixtures[TableProps]{
	"Simple": {Children: gx.Frag(
		TableCaption(TableCaptionProps{Children: gx.Text("A list of invoices.")}),
		invoiceHead(),
		TableBody(TableBodyProps{Children: invoiceRows()}),
	)},
	"Footer": {Children: gx.Frag(
		invoiceHead(),
		TableBody(TableBodyProps{Children: invoiceRows()}),
		TableFooter(TableFooterProps{Children: TableRow(TableRowProps{Children: gx.Frag(
			TableCell(TableCellProps{Attrs: gx.Attrs{{Key: "colspan", Value: "2"}}, Children: gx.Text("Total")}),
			TableCell(TableCellProps{Children: gx.Text("$200.00")}),
		)})}),
	)},
	"Selected": {Children: gx.Frag(
		invoiceHead(),
		TableBody(TableBodyProps{Children: gx.Frag(
			TableRow(TableRowProps{Attrs: gx.Attrs{{Key: "data-state", Value: "selected"}}, Children: gx.Frag(
				TableCell(TableCellProps{Children: gx.Text("INV-001")}),
				TableCell(TableCellProps{Children: gx.Text("Paid")}),
				TableCell(TableCellProps{Children: gx.Text("$120.00")}),
			)}),
			TableRow(TableRowProps{Children: gx.Frag(
				TableCell(TableCellProps{Children: gx.Text("INV-002")}),
				TableCell(TableCellProps{Children: gx.Text("Open")}),
				TableCell(TableCellProps{Children: gx.Text("$80.00")}),
			)}),
		)}),
	)},
}

package table

import "github.com/alternayte/gx"

var TableBodyFixtures = gx.Fixtures[TableBodyProps]{"Empty": {}}

package table

import "github.com/alternayte/gx"

var TableCaptionFixtures = gx.Fixtures[TableCaptionProps]{"Caption": {Children: gx.Text("A caption.")}}

package table

import "github.com/alternayte/gx"

var TableCellFixtures = gx.Fixtures[TableCellProps]{"Cell": {Children: gx.Text("Value")}}

package table

import "github.com/alternayte/gx"

var TableFooterFixtures = gx.Fixtures[TableFooterProps]{"Empty": {}}

package table

import "github.com/alternayte/gx"

var TableHeadFixtures = gx.Fixtures[TableHeadProps]{"Header": {Children: gx.Text("Column")}}

package table

import "github.com/alternayte/gx"

var TableHeaderFixtures = gx.Fixtures[TableHeaderProps]{"Empty": {}}

package table

import "github.com/alternayte/gx"

var TableRowFixtures = gx.Fixtures[TableRowProps]{"Empty": {}}