Giters

ClickHouse / click-ui

The home of the ClickHouse design system and component library.

Home Page:https://click-ui.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Table component

gjones opened this issue · comments

commented

Summary

Table component, complete with header and row tokens. I went back and forth on whether the row values were actually cell values. Note that on mobile we should adjust the table to become cards (designs supplied), sorting can then be done via select box.

CleanShot 2023-06-27 at 13 26 04@2x

Tokens

  --click-table-global-color-background-default: var(--click-global-color-background-default);
  --click-table-global-color-stroke-default: var(--click-table-row-color-stroke-default);
  --click-table-header-color-checkbox-border-default: var(--palette-slate-500);
  --click-table-header-color-checkbox-background-default: var(--palette-slate-200);
  --click-table-header-color-title-default: var(--click-global-color-text-default);
  --click-table-header-title-default: var(--typography-styles-text-sbold-sm);
  --click-table-header-color-background-default: var(--click-global-color-background-muted);
  --click-table-header-color-icon-default: var(--click-image-color-stroke);
  --click-table-row-color-label-default: var(--click-field-color-label-default);
  --click-table-row-color-link-default: var(--click-global-color-text-link-default);
  --click-table-row-color-text-default: var(--click-global-color-text-default);
  --click-table-row-color-stroke-default: var(--click-global-color-stroke-default);
  --click-table-row-color-background-default: var(--click-global-color-background-default);
  --click-table-row-color-background-hover: var(--palette-info-50);
  --click-table-row-color-background-active: var(--click-table-row-color-background-hover);
  --click-table-cell-text-default: var(--typography-styles-text-md);
  --click-table-cell-label-default: var(--click-field-typography-label-default);