Loading...
Loading...
Build tables with ShadTable.list or ShadTable builder; ShadTableCell.header, ShadTableCell.footer, columnSpanExtent (FixedTableSpanExtent, RemainingTableSpanExtent). Use when displaying tabular data or responsive tables in a Flutter shadcn_ui app.
npx skill4agent add serverpod/skills-registry shadcn_ui-tableShadTableShadTable.listheaderfooterShadTableCell.headerShadTableCell.footerchildrenShadTableCellShadTablecolumnCountrowCountheaderbuilderfootercolumnSpanExtentFixedTableSpanExtent(130)MaxTableSpanExtent(FixedTableSpanExtent(120), RemainingTableSpanExtent())ShadTable.list(
header: const [
ShadTableCell.header(child: Text('Invoice')),
ShadTableCell.header(child: Text('Status')),
ShadTableCell.header(child: Text('Method')),
ShadTableCell.header(
alignment: Alignment.centerRight,
child: Text('Amount'),
),
],
footer: const [
ShadTableCell.footer(child: Text('Total')),
ShadTableCell.footer(child: Text('')),
ShadTableCell.footer(child: Text('')),
ShadTableCell.footer(
alignment: Alignment.centerRight,
child: Text(r'$2500.00'),
),
],
columnSpanExtent: (index) {
if (index == 2) return const FixedTableSpanExtent(130);
if (index == 3) {
return const MaxTableSpanExtent(
FixedTableSpanExtent(120),
RemainingTableSpanExtent(),
);
}
return null;
},
children: invoices.map(
(invoice) => [
ShadTableCell(
child: Text(
invoice.invoice,
style: const TextStyle(fontWeight: FontWeight.w500),
),
),
ShadTableCell(child: Text(invoice.paymentStatus)),
ShadTableCell(child: Text(invoice.paymentMethod)),
ShadTableCell(
alignment: Alignment.centerRight,
child: Text(invoice.totalAmount),
),
],
),
)ShadTable(columnCount:, rowCount:, header: (context, column) => ..., columnSpanExtent: (index) => ..., builder: (context, index) => ShadTableCell(...), footer: (context, column) => ...)rowcolumn