在SvelteKit的Carbon DataTable中如何获取单元格显示文本而非原始值？

核心方案：使用cell.formattedValue获取格式化后的值 #

Carbon Svelte的DataTable单元格对象本身提供了formattedValue属性，它会自动调用对应列配置中display函数处理后的结果，无需手动查找列头调用display方法。

具体实现步骤 #

1. 定义列配置：给价格列设置display函数实现德语区域货币格式化，同时开启排序：

<script>
  import { DataTable, TableHeader, TableBody, TableRow, TableCell } from '@carbon/svelte';

  // 列配置
  const columns = [
    {
      key: 'title',
      header: '标题',
      sortable: false
    },
    {
      key: 'priceInEuros',
      header: '价格（欧元）',
      sortable: true,
      // 德语区域货币格式化，处理null值
      display: (value) => {
        if (value === null) return '-';
        return new Intl.NumberFormat('de-DE', { 
          style: 'currency', 
          currency: 'EUR' 
        }).format(value);
      }
    }
  ];

  // 数据源
  const items = [
    { title: '商品A', priceInEuros: 29.99, link: 'https://example.com/a' },
    { title: '商品B', priceInEuros: null, link: 'https://example.com/b' },
    { title: '商品C', priceInEuros: 149.50, link: 'https://example.com/c' }
  ];
</script>

2. 自定义单元格渲染：标题列渲染外部链接，其他列直接使用formattedValue：

<DataTable {columns} {items}>
  <svelte:fragment slot="cell({ column, cell })">
    {#if column.key === 'title'}
      <a href={cell.item.link} target="_blank" rel="noopener noreferrer">
        {cell.value}
      </a>
    {:else}
      <!-- 直接使用格式化后的值 -->
      {cell.formattedValue}
    {/if}
  </svelte:fragment>
</DataTable>

关键说明 #

• formattedValue会自动关联对应列的display函数，返回处理后的显示文本，完美替代你想要的cell.displayValue效果。
• 价格列的排序逻辑依然基于原始的priceInEuros数值，不受格式化影响，满足可排序的需求。
• 处理null值的场景，避免单元格为空。

内容的提问来源于stack exchange，提问作者baitendbidz