Back to Details

shadcn_ui-table

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Table

Shadcn UI — 表格

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())
.
ShadTable
是一款响应式表格。对于小型表格（一次性构建所有行），请使用
ShadTable.list
：传入
header
、
footer
（由
ShadTableCell.header
/
ShadTableCell.footer
组成的列表）以及
children
（由
ShadTableCell
行列表组成的列表）。对于大型表格（按需构建），请使用带有
columnCount
、
rowCount
、
header
、
builder
、
footer
参数的
ShadTable
。使用
columnSpanExtent
设置列宽：例如
FixedTableSpanExtent(130)
或
MaxTableSpanExtent(FixedTableSpanExtent(120), RemainingTableSpanExtent())
。

List (small tables)

列表模式（小型表格）

dart
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),
      ),
    ],
  ),
)
dart
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.
使用
ShadTable(columnCount:, rowCount:, header: (context, column) => ..., columnSpanExtent: (index) => ..., builder: (context, index) => ShadTableCell(...), footer: (context, column) => ...)
。构建器会接收包含
row
和
column
的表格索引。对于大数据量，建议使用构建器模式，这样只会构建可见的行。

Additional resources

额外资源

Detailed column span and builder patterns: reference.md.
关于列跨度和构建器模式的详细说明：reference.md。