avances en tablas
This commit is contained in:
JACS
parent
65f7715b05
commit
cc0c524337
7 changed files with 339 additions and 255 deletions
|
|
@ -69,21 +69,28 @@ func TablerNavbar(c *core.Context) *core.Response {
|
|||
return c.Response.Template("tabler_default.html", data)
|
||||
}
|
||||
|
||||
// TablerTables renders a page with table components
|
||||
// TablerTables renders a page with table components.
|
||||
// Uses a page-specific struct that embeds TablerPageData and adds the Tables field.
|
||||
// The template detects tables via hasField and renders them.
|
||||
func TablerTables(c *core.Context) *core.Response {
|
||||
data := TablerPageData{
|
||||
PageTitle: "Tables",
|
||||
PageDescription: "Table demo page",
|
||||
ShowTopbar: true,
|
||||
Sidebar: false,
|
||||
PageHeader: "Tables",
|
||||
PagePretitle: "Components",
|
||||
UserName: "Jane Doe",
|
||||
UserRole: "Administrator",
|
||||
NavbarMenu: SampleNavbarMenu(),
|
||||
TableHeaders: SampleTableHeaders(),
|
||||
TableRows: SampleTableRows(),
|
||||
Content: template.HTML(""),
|
||||
type tablesPageData struct {
|
||||
TablerPageData
|
||||
Tables []TableComponent
|
||||
}
|
||||
data := tablesPageData{
|
||||
TablerPageData: TablerPageData{
|
||||
PageTitle: "Tables",
|
||||
PageDescription: "Table demo page",
|
||||
ShowTopbar: true,
|
||||
Sidebar: false,
|
||||
PageHeader: "Tables",
|
||||
PagePretitle: "Components",
|
||||
UserName: "Jane Doe",
|
||||
UserRole: "Administrator",
|
||||
NavbarMenu: SampleNavbarMenu(),
|
||||
Content: template.HTML(""),
|
||||
},
|
||||
Tables: SampleTables(),
|
||||
}
|
||||
return c.Response.Template("tabler_tables.html", data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,133 +44,173 @@ func SampleNavbarMenu() TablerMenu {
|
|||
}
|
||||
}
|
||||
|
||||
// SampleTableRows returns sample data for table demos
|
||||
// Migrated from liquid/data/people.json
|
||||
func SampleTableRows() []TableRow {
|
||||
return []TableRow{
|
||||
{
|
||||
ID: "1",
|
||||
Name: "Paweł Kuna",
|
||||
AvatarID: "000m",
|
||||
Email: "paweluna@howstuffworks.com",
|
||||
City: "Peimei",
|
||||
Country: "China",
|
||||
Status: "VIP",
|
||||
JobTitle: "UI Designer",
|
||||
Department: "Training",
|
||||
Date: "2025-04-07",
|
||||
Tags: []string{"High Volume"},
|
||||
Category: "Training",
|
||||
// SampleTables returns two sample table components for the tables demo page.
|
||||
// Table 1: Users table (avatar, name, city, status, date, tags, category).
|
||||
// Table 2: Projects table (name, description, progress, priority, assignee, deadline).
|
||||
func SampleTables() []TableComponent {
|
||||
table1 := TableComponent{
|
||||
ID: "users-table",
|
||||
Title: "Users",
|
||||
Striped: false,
|
||||
Hover: true,
|
||||
Headers: []TableComponentHeader{
|
||||
{Name: "Name", Sort: "sort-name"},
|
||||
{Name: "City", Sort: "sort-city"},
|
||||
{Name: "Status", Sort: "sort-status"},
|
||||
{Name: "Start date", Sort: "sort-date"},
|
||||
{Name: "Tags", Sort: "sort-tags"},
|
||||
{Name: "Category", Sort: "sort-category"},
|
||||
},
|
||||
{
|
||||
ID: "2",
|
||||
Name: "Jeffie Lewzey",
|
||||
AvatarID: "052f",
|
||||
Email: "jlewzey1@seesaa.net",
|
||||
City: "Indaial",
|
||||
Country: "Brazil",
|
||||
Status: "New",
|
||||
JobTitle: "Chemical Engineer",
|
||||
Department: "Support",
|
||||
Date: "2024-12-12",
|
||||
Tags: []string{"No Refunds"},
|
||||
Category: "Support",
|
||||
},
|
||||
{
|
||||
ID: "3",
|
||||
Name: "Mallory Hulme",
|
||||
AvatarID: "002m",
|
||||
Email: "mhulme2@domainmarket.com",
|
||||
City: "Cimuncang",
|
||||
Country: "Indonesia",
|
||||
Status: "VIP",
|
||||
JobTitle: "Geologist IV",
|
||||
Department: "Support",
|
||||
Date: "2025-01-09",
|
||||
Tags: []string{"High Value", "No Refunds", "Loyal"},
|
||||
Category: "Support",
|
||||
},
|
||||
{
|
||||
ID: "4",
|
||||
Name: "Dunn Slane",
|
||||
AvatarID: "003m",
|
||||
Email: "dslane3@epa.gov",
|
||||
City: "Liutang",
|
||||
Country: "China",
|
||||
Status: "Regular",
|
||||
JobTitle: "Research Nurse",
|
||||
Department: "Sales",
|
||||
Date: "2022-10-01",
|
||||
Tags: []string{"No Refunds"},
|
||||
Category: "Sales",
|
||||
},
|
||||
{
|
||||
ID: "5",
|
||||
Name: "Emmy Levet",
|
||||
AvatarID: "000f",
|
||||
Email: "elevet4@senate.gov",
|
||||
City: "Kaliprak",
|
||||
Country: "Indonesia",
|
||||
Status: "Regular",
|
||||
JobTitle: "VP Product Management",
|
||||
Department: "Accounting",
|
||||
Date: "2025-05-18",
|
||||
Tags: []string{"Standard"},
|
||||
Category: "Accounting",
|
||||
},
|
||||
{
|
||||
ID: "6",
|
||||
Name: "Maryjo Lebarree",
|
||||
AvatarID: "001f",
|
||||
Email: "mlebarree5@unc.edu",
|
||||
City: "Hantai",
|
||||
Country: "China",
|
||||
Status: "Regular",
|
||||
JobTitle: "Civil Engineer",
|
||||
Department: "Product Management",
|
||||
Date: "2025-06-06",
|
||||
Tags: []string{"No Refunds", "Loyal"},
|
||||
Category: "Product Management",
|
||||
},
|
||||
{
|
||||
ID: "7",
|
||||
Name: "Egan Poetz",
|
||||
AvatarID: "004m",
|
||||
Email: "epoetz6@free.fr",
|
||||
City: "Villaguay",
|
||||
Country: "Argentina",
|
||||
Status: "New",
|
||||
JobTitle: "Research Nurse",
|
||||
Department: "Engineering",
|
||||
Date: "2024-08-21",
|
||||
Tags: []string{"No Refunds"},
|
||||
Category: "Engineering",
|
||||
},
|
||||
{
|
||||
ID: "8",
|
||||
Name: "Kellie Skingley",
|
||||
AvatarID: "002f",
|
||||
Email: "kskingley7@columbia.edu",
|
||||
City: "Sidon",
|
||||
Country: "Lebanon",
|
||||
Status: "VIP",
|
||||
JobTitle: "Teacher",
|
||||
Department: "Services",
|
||||
Date: "2025-02-23",
|
||||
Tags: []string{"No Refunds", "Loyal"},
|
||||
Category: "Services",
|
||||
Rows: []TableComponentRow{
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Paweł Kuna", AvatarID: "000m", Subtext: "paweluna@howstuffworks.com"},
|
||||
{Type: "text", Value: "Peimei, China"},
|
||||
{Type: "status", Value: "VIP", StatusColor: "bg-blue"},
|
||||
{Type: "date", Value: "2025-04-07"},
|
||||
{Type: "tags", Tags: []string{"High Volume"}},
|
||||
{Type: "badge", Value: "Training", BadgeColor: "bg-muted-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Jeffie Lewzey", AvatarID: "052f", Subtext: "jlewzey1@seesaa.net"},
|
||||
{Type: "text", Value: "Indaial, Brazil"},
|
||||
{Type: "status", Value: "New", StatusColor: "bg-green"},
|
||||
{Type: "date", Value: "2024-12-12"},
|
||||
{Type: "tags", Tags: []string{"No Refunds"}},
|
||||
{Type: "badge", Value: "Support", BadgeColor: "bg-blue-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Mallory Hulme", AvatarID: "002m", Subtext: "mhulme2@domainmarket.com"},
|
||||
{Type: "text", Value: "Cimuncang, Indonesia"},
|
||||
{Type: "status", Value: "VIP", StatusColor: "bg-blue"},
|
||||
{Type: "date", Value: "2025-01-09"},
|
||||
{Type: "tags", Tags: []string{"High Value", "No Refunds", "Loyal"}},
|
||||
{Type: "badge", Value: "Support", BadgeColor: "bg-blue-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Dunn Slane", AvatarID: "003m", Subtext: "dslane3@epa.gov"},
|
||||
{Type: "text", Value: "Liutang, China"},
|
||||
{Type: "status", Value: "Regular", StatusColor: "bg-muted"},
|
||||
{Type: "date", Value: "2022-10-01"},
|
||||
{Type: "tags", Tags: []string{"No Refunds"}},
|
||||
{Type: "badge", Value: "Sales", BadgeColor: "bg-green-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Emmy Levet", AvatarID: "000f", Subtext: "elevet4@senate.gov"},
|
||||
{Type: "text", Value: "Kaliprak, Indonesia"},
|
||||
{Type: "status", Value: "Regular", StatusColor: "bg-muted"},
|
||||
{Type: "date", Value: "2025-05-18"},
|
||||
{Type: "tags", Tags: []string{"Standard"}},
|
||||
{Type: "badge", Value: "Accounting", BadgeColor: "bg-yellow-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Maryjo Lebarree", AvatarID: "001f", Subtext: "mlebarree5@unc.edu"},
|
||||
{Type: "text", Value: "Hantai, China"},
|
||||
{Type: "status", Value: "Regular", StatusColor: "bg-muted"},
|
||||
{Type: "date", Value: "2025-06-06"},
|
||||
{Type: "tags", Tags: []string{"No Refunds", "Loyal"}},
|
||||
{Type: "badge", Value: "Product Management", BadgeColor: "bg-orange-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Egan Poetz", AvatarID: "004m", Subtext: "epoetz6@free.fr"},
|
||||
{Type: "text", Value: "Villaguay, Argentina"},
|
||||
{Type: "status", Value: "New", StatusColor: "bg-green"},
|
||||
{Type: "date", Value: "2024-08-21"},
|
||||
{Type: "tags", Tags: []string{"No Refunds"}},
|
||||
{Type: "badge", Value: "Engineering", BadgeColor: "bg-blue-lt"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "avatar", Value: "Kellie Skingley", AvatarID: "002f", Subtext: "kskingley7@columbia.edu"},
|
||||
{Type: "text", Value: "Sidon, Lebanon"},
|
||||
{Type: "status", Value: "VIP", StatusColor: "bg-blue"},
|
||||
{Type: "date", Value: "2025-02-23"},
|
||||
{Type: "tags", Tags: []string{"No Refunds", "Loyal"}},
|
||||
{Type: "badge", Value: "Services", BadgeColor: "bg-purple-lt"},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// SampleTableHeaders returns headers for the advanced table
|
||||
func SampleTableHeaders() []TableHeader {
|
||||
return []TableHeader{
|
||||
{Name: "Name", Sort: "sort-name"},
|
||||
{Name: "City", Sort: "sort-city"},
|
||||
{Name: "Status", Sort: "sort-status"},
|
||||
{Name: "Start date", Sort: "sort-date"},
|
||||
{Name: "Tags", Sort: "sort-tags"},
|
||||
{Name: "Category", Sort: "sort-category"},
|
||||
table2 := TableComponent{
|
||||
ID: "projects-table",
|
||||
Title: "Projects",
|
||||
Striped: true,
|
||||
Hover: true,
|
||||
Headers: []TableComponentHeader{
|
||||
{Name: "Project", Sort: "sort-project"},
|
||||
{Name: "Progress", Sort: "sort-progress"},
|
||||
{Name: "Priority"},
|
||||
{Name: "Assignee", Sort: "sort-assignee"},
|
||||
{Name: "Deadline", Sort: "sort-deadline"},
|
||||
{Name: "", Width: "w-1"},
|
||||
},
|
||||
Rows: []TableComponentRow{
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "text", Value: "Tabler UI Kit"},
|
||||
{Type: "text", Value: "75%"},
|
||||
{Type: "badge", Value: "High", BadgeColor: "bg-red-lt"},
|
||||
{Type: "avatar", Value: "Paweł Kuna", AvatarID: "000m", Subtext: "Lead Designer"},
|
||||
{Type: "date", Value: "2025-06-30"},
|
||||
{Type: "actions"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "text", Value: "Mobile App v2"},
|
||||
{Type: "text", Value: "45%"},
|
||||
{Type: "badge", Value: "Medium", BadgeColor: "bg-yellow-lt"},
|
||||
{Type: "avatar", Value: "Jeffie Lewzey", AvatarID: "052f", Subtext: "Developer"},
|
||||
{Type: "date", Value: "2025-07-15"},
|
||||
{Type: "actions"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "text", Value: "API Gateway"},
|
||||
{Type: "text", Value: "90%"},
|
||||
{Type: "badge", Value: "Low", BadgeColor: "bg-green-lt"},
|
||||
{Type: "avatar", Value: "Mallory Hulme", AvatarID: "002m", Subtext: "Backend Engineer"},
|
||||
{Type: "date", Value: "2025-05-01"},
|
||||
{Type: "actions"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "text", Value: "Admin Dashboard"},
|
||||
{Type: "text", Value: "30%"},
|
||||
{Type: "badge", Value: "Critical", BadgeColor: "bg-red-lt"},
|
||||
{Type: "avatar", Value: "Dunn Slane", AvatarID: "003m", Subtext: "Frontend Dev"},
|
||||
{Type: "date", Value: "2025-08-20"},
|
||||
{Type: "actions"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Cells: []TableCell{
|
||||
{Type: "text", Value: "Data Pipeline"},
|
||||
{Type: "text", Value: "60%"},
|
||||
{Type: "badge", Value: "Medium", BadgeColor: "bg-yellow-lt"},
|
||||
{Type: "avatar", Value: "Emmy Levet", AvatarID: "000f", Subtext: "Data Engineer"},
|
||||
{Type: "date", Value: "2025-06-15"},
|
||||
{Type: "actions"},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return []TableComponent{table1, table2}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,30 +17,60 @@ type TablerMenuItem struct {
|
|||
// TablerMenu is a map of menu sections keyed by identifier
|
||||
type TablerMenu map[string]*TablerMenuItem
|
||||
|
||||
// TableHeader represents a column header
|
||||
type TableHeader struct {
|
||||
// TableComponent represents a reusable table component with headers and rows.
|
||||
type TableComponent struct {
|
||||
ID string
|
||||
Title string
|
||||
Headers []TableComponentHeader
|
||||
Rows []TableComponentRow
|
||||
EmptyMessage string
|
||||
PerPageOptions []string
|
||||
Striped bool
|
||||
Hover bool
|
||||
CardClass string
|
||||
TableClass string
|
||||
}
|
||||
|
||||
// TableComponentHeader defines a single column header.
|
||||
type TableComponentHeader struct {
|
||||
Name string
|
||||
Sort string
|
||||
Width string
|
||||
Align string
|
||||
}
|
||||
|
||||
// TableRow represents a single row of mock data
|
||||
type TableRow struct {
|
||||
ID string
|
||||
Name string
|
||||
AvatarID string
|
||||
Email string
|
||||
City string
|
||||
Country string
|
||||
Status string
|
||||
JobTitle string
|
||||
Department string
|
||||
Date string
|
||||
Tags []string
|
||||
Category string
|
||||
// TableComponentRow represents a single row as a slice of cells.
|
||||
type TableComponentRow struct {
|
||||
Cells []TableCell
|
||||
}
|
||||
|
||||
// TablerPageData holds the common data for all tabler pages
|
||||
// TableCell represents a single cell in a table row.
|
||||
// Type controls how the cell is rendered in the template:
|
||||
// "text" - plain text
|
||||
// "avatar" - avatar with name/email
|
||||
// "status" - status dot + text
|
||||
// "badge" - colored badge
|
||||
// "tags" - list of tag badges
|
||||
// "actions" - dropdown action button
|
||||
// "date" - date display
|
||||
type TableCell struct {
|
||||
Type string
|
||||
Value string
|
||||
// Used by "avatar" type
|
||||
AvatarID string
|
||||
Subtext string
|
||||
// Used by "status" type
|
||||
StatusColor string
|
||||
// Used by "badge" type
|
||||
BadgeColor string
|
||||
// Used by "tags" type
|
||||
Tags []string
|
||||
}
|
||||
|
||||
// TablerPageData holds the common data for all tabler pages.
|
||||
// It should NOT contain component-specific fields like tables or forms.
|
||||
// Add those by creating a page-specific struct that embeds TablerPageData
|
||||
// and defines the component fields, then use hasField in the template.
|
||||
type TablerPageData struct {
|
||||
PageTitle string
|
||||
PageDescription string
|
||||
|
|
@ -60,8 +90,4 @@ type TablerPageData struct {
|
|||
UserRole string
|
||||
NavbarMenu TablerMenu
|
||||
CurrentPage string
|
||||
// Table data
|
||||
TableHeaders []TableHeader
|
||||
TableRows []TableRow
|
||||
PerPageOptions []string
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue