shadcn_ui-table
Shadcn UI — Table
Instructions
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()).
List (small tables)
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),
),
],
),
)
Builder (large tables)
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.
Additional resources
Detailed column span and builder patterns: reference.md.
More from serverpod/skills-registry
riverpod-codegen-and-hooks
Use Riverpod code generation (@riverpod, riverpod_generator) and hooks (hooks_riverpod, HookConsumerWidget, flutter_hooks with Riverpod). Use when the user asks about @riverpod, code generation, riverpod_generator, when to use codegen, or using flutter_hooks with Riverpod (HookConsumerWidget, HookConsumer).
25riverpod-providers
Declare and use Riverpod providers (Provider, FutureProvider, StreamProvider, NotifierProvider, AsyncNotifierProvider, StreamNotifierProvider); unmodifiable vs modifiable, top-level declaration, Ref, Notifier build method. Use when creating providers, choosing provider type, writing Notifier classes, or understanding Riverpod state. Use this skill whenever the user asks about Riverpod providers, provider types, or notifiers.
24riverpod-consumers
Use Riverpod Consumer, ConsumerWidget, and ConsumerStatefulWidget to read and watch providers in widgets; WidgetRef, builder ref parameter. Use when building widgets that need to access Riverpod providers, ref.watch or ref.read in the UI, or converting StatelessWidget to ConsumerWidget. Prefer this skill when the user asks how to use providers in Flutter widgets or why ConsumerWidget is required.
19riverpod-auto-dispose
Enable automatic disposal of Riverpod providers when they have no listeners; keepAlive, onDispose, invalidate, ref.keepAlive. Use when preventing memory leaks, caching only while used, or cleaning up resources when a provider is no longer needed. Use this skill when the user asks about auto-dispose, keepAlive, or when to dispose Riverpod state.
17riverpod-faq-and-practices
Answers Riverpod FAQ (ref.refresh vs invalidate, ConsumerWidget vs StatelessWidget, Ref vs WidgetRef, reset all providers, ref after unmount) and do/don't best practices (avoid init in widgets, avoid ephemeral state in providers, avoid side effects in provider init, static providers, riverpod_lint). Use when the user asks Riverpod FAQ, best practices, or do/don't guidelines.
16riverpod-testing
Test Riverpod providers and widgets; ProviderContainer.test, unit tests, widget tests with ProviderScope, tester.container(), mocking with overrides, container.listen for auto-dispose, awaiting .future. Use when writing unit or widget tests for Riverpod code, mocking providers, or testing with overrides. Use this skill when the user asks about testing Riverpod, mocking providers, or ProviderContainer in tests.
15