メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-table |
| description | 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. |
ShadTable is a responsive table. Use ShadTable.list for small tables (all rows built at once): pass header, footer (lists of ShadTableCell.header / ShadTableCell.footer), and children (list of row lists of ShadTableCell). Use ShadTable with columnCount, rowCount, header, builder, footer for large tables (on-demand building). Use columnSpanExtent to set column widths: FixedTableSpanExtent(130) or 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),
),
],
),
)
Use ShadTable(columnCount:, rowCount:, header: (context, column) => ..., columnSpanExtent: (index) => ..., builder: (context, index) => ShadTableCell(...), footer: (context, column) => ...). The builder receives a table index with row and column. Prefer builder for large data so only visible rows are built.
Detailed column span and builder patterns: reference.md.