Intentwise Primitives

<AdvancedAnalyticsTable
  data={rows}
  columns={createAdvancedAnalyticsColumns({ enableRowSelection: true })}
  getRowId={(row) => row.id}
  sorting={sorting} onSortingChange={setSorting}
  columnVisibility={visibility} onColumnVisibilityChange={setVisibility}
  columnSizing={sizing} onColumnSizingChange={setSizing}
  pagination={pagination} onPaginationChange={setPagination}
  rowSelection={selection} onRowSelectionChange={setSelection}
  maxHeight={420}
  enablePagination showTotalsRow
  selectedRowId={selectedRowId} onSelectedRowIdChange={setSelectedRowId}
  onCellCommit={handleCellCommit}
/>

<AdvancedAnalyticsTable
  columnPinning={{
    left: [
      ADVANCED_ANALYTICS_COLUMN_IDS.select,
      ADVANCED_ANALYTICS_COLUMN_IDS.deliveryActivationStatus,
      ADVANCED_ANALYTICS_COLUMN_IDS.orderName,
    ],
  }}
  // ... other props
/>

const columns = createCompareAnalyticsColumns({
  enableRowSelection: true,
  expandedGroups: new Set(['spend', 'impressions']),
});
const rows = buildCompareRows(baseRows);

<AdvancedAnalyticsTable
  data={rows}
  columns={columns}
  onHeaderGroupAction={({ groupId }) => toggleGroup(groupId)}
/>

<EntityNameCell
  value="Sponsored Products — Brand Awareness"
  entityId="camp_001"
  enableCopy
  onCopy={(text) => toast('success', `Copied: ${text}`)}
/>

// With a separate clipboard value
<EntityNameCell
  value="Sponsored Products — Brand Awareness"
  entityId="camp_001"
  enableCopy
  copyValue="camp_001"
  onCopy={(text) => toast('success', `ID copied: ${text}`)}
/>

<DataTable data={tabularData} title="Top Customers" striped />

<DataTable data={data} density="compact" />

<DataTable
  data={ordersData}
  density="compact"
  maxHeight="480px"
  hoverable
  showTotalsRow
  totalsLabelColumnKey="orderName"
  embedded
/>

<InlineEditableCurrencyCell
  value={3000}
  currencySymbol="$"
  min={0.01}
  onSubmit={async (nextValue) => save(nextValue)}
/>

<InlineTextInputCell value={name} onChange={setName} />

<InlineNumberInputCell value={budget} onChange={setBudget} min={0} prefix="$" step={100} />

<InlineDatePickerCell value={startDate} onChange={setStartDate} min={todayIso} />

<DataTable data={basicData} />

<ComparisonTable
  data={{ columns: [...], rows: [...], showDelta: true, highlightBest: true }}
  title="Campaign A vs B"
/>

<ComparisonTable data={{ ...data, showDelta: false }} />

<ComparisonTable data={...} size="sm" />

<TimelineView
  data={{ events: [...] }}
  title="Campaign History"
/>

<TimelineView data={...} showDates={false} />

<DailyPerformanceTable
  dateRangeLabel="Feb 01 - Feb 07"
  dates={['2025-02-01', ...]}
  rows={[{ label: 'Total Sales', wowValue: '+2.0%', cells: [{ value: '$12.2k' }, ...] }, ...]}
/>

<EightWeekSalesTrend
  title="8-Week Total Sales Trend"
  weeks={[{ dateRange: 'Jan 05 - Jan 11', value: 45200, wowPercent: 2.1, mixPercent: 0.5 }, ...]}
/>

<TableColumnSelector
  columns={columns}
  open={open}
  onOpenChange={setOpen}
  onApply={(state) => setState(state)}
  initialState={state}
/>

<TextCell value="Hello" />
<TextCell value={null} placeholder="N/A" />
const renderer = createTextCellRenderer({ placeholder: 'N/A' });

<FormattedTextCell value="ACTIVE_CAMPAIGN" format="humanize-enum" />
<FormattedTextCell value="hello world" format="title-case" />

<TotalsAwareTextCell value="Orders" row={{ _isTotal: false }} />
<TotalsAwareTextCell value="Total" row={{ _isTotal: true }} />

<StatusResultCell value="SUCCESS" />
<StatusResultCell value="FAILED" />
<StatusResultCell value="PENDING" />

const registry = createCellRendererRegistry();
// registry.text('Campaign A', {})
// registry.humanize('ACTIVE_STATUS', {})
// registry.status('SUCCESS', {})

<SelectableTable columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<SelectableTable selectionMode="radio" columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<SelectableTable rowMinHeight="48px" rowMaxHeight="72px"
  columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<SelectableTable loading columns={cols} rows={[]} rowIdField="id"
  selectedIds={new Set()} onSelectionChange={() => {}} />

const columns: SimpleTableColumn<Row>[] = [
  { key: 'campaign', header: 'Campaign' },
  { key: 'spend', header: 'Spend', align: 'right', cellClassName: 'tabular-nums', render: (row) => `$${row.spend}` },
  { key: 'status', header: 'Status', render: (row) => <StatusBadge status={row.status} /> },
];

<SimpleTable columns={columns} rows={rows} rowIdField="id" />

const columns: SimpleTableColumn<ResultRow>[] = [
  { key: 'keyword', header: 'Keyword' },
  { key: 'matchType', header: 'Match Type', cellClassName: 'capitalize' },
  {
    key: 'updatedStatus',
    header: 'Updated Status',
    cellClassName: 'font-medium',
    render: (row) => (
      <span className={row.success ? 'text-iw-success' : 'text-iw-error'}>{row.updatedStatus}</span>
    ),
  },
];

<SimpleTable columns={columns} rows={results} />

<SimpleTable columns={columns} rows={[]} emptyMessage="No campaigns found." />