@tcn/ui-table 2.4.0 → 2.4.2

package/dist/components/table_filter_panel/field_filters/select_field_filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearFilterButton } from './clear_button.js';\n\nexport type SelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(SelectFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const valueLabel = options.find(option => option.value === value)?.label ?? '';\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack>\n        <Select\n          value={valueLabel}\n          onChange={value => {\n            const realValue = options.find(option => option.label === value)?.value;\n            presenter.setValue(realValue ?? null);\n          }}\n          width=\"flex\"\n        >\n          {options.map(option => (\n            <Option\n              key={option.value.toString()}\n              value={option.label}\n              label={option.label}\n            >\n              {option.label}\n            </Option>\n          ))}\n        </Select>\n        <ClearFilterButton\n          onClick={() => presenter.setValue(null)}\n          disabled={value == null}\n        />\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["SelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","SelectFieldFilterPresenter","value","useSignalValue","valueLabel","option","jsxs","VStack","jsx","Box","Title","HStack","Select","realValue","Option","ClearFilterButton"],"mappings":";;;;;;;;AAaO,SAASA,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,KAAmC;AACvF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAaN,EAAQ,KAAK,CAAAO,MAAUA,EAAO,UAAUH,CAAK,GAAG,SAAS;AAE5E,SACE,gBAAAI,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,sBACCC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOR;AAAA,UACP,UAAU,CAAAF,MAAS;AACjB,kBAAMW,IAAYf,EAAQ,KAAK,OAAUO,EAAO,UAAUH,CAAK,GAAG;AAClE,YAAAH,EAAU,SAASc,KAAa,IAAI;AAAA,UACtC;AAAA,UACA,OAAM;AAAA,UAEL,UAAAf,EAAQ,IAAI,CAAAO,MACX,gBAAAG;AAAA,YAACM;AAAA,YAAA;AAAA,cAEC,OAAOT,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cAEb,UAAAA,EAAO;AAAA,YAAA;AAAA,YAJHA,EAAO,MAAM,SAAA;AAAA,UAAS,CAM9B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMhB,EAAU,SAAS,IAAI;AAAA,UACtC,UAAUG,KAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Option, Select } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\n\nexport type SelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(SelectFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const valueLabel = options.find(option => option.value === value)?.label ?? '';\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <Select\n        value={valueLabel}\n        onChange={value => {\n          const realValue = options.find(option => option.label === value)?.value;\n          presenter.setValue(realValue ?? null);\n        }}\n        width=\"flex\"\n      >\n        {options.map(option => (\n          <Option key={option.value.toString()} value={option.label} label={option.label}>\n            {option.label}\n          </Option>\n        ))}\n      </Select>\n    </ClearableField>\n  );\n}\n"],"names":["SelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","SelectFieldFilterPresenter","value","useSignalValue","valueLabel","option","jsx","ClearableField","Select","realValue","Option"],"mappings":";;;;;;AAWO,SAASA,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,KAAmC;AACvF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAaN,EAAQ,KAAK,CAAAO,MAAUA,EAAO,UAAUH,CAAK,GAAG,SAAS;AAE5E,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOJ;AAAA,UACP,UAAU,CAAAF,MAAS;AACjB,kBAAMO,IAAYX,EAAQ,KAAK,OAAUO,EAAO,UAAUH,CAAK,GAAG;AAClE,YAAAH,EAAU,SAASU,KAAa,IAAI;AAAA,UACtC;AAAA,UACA,OAAM;AAAA,UAEL,YAAQ,IAAI,CAAAJ,MACX,gBAAAC,EAACI,GAAA,EAAqC,OAAOL,EAAO,OAAO,OAAOA,EAAO,OACtE,UAAAA,EAAO,MAAA,GADGA,EAAO,MAAM,UAE1B,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/table_filter_panel/table_filter_panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAuB,EACvB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}
+{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAuB,EACvB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA6BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}

package/dist/components/table_filter_panel/table_filter_panel.js

@@ -2,13 +2,13 @@ import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { createContext as f, useState as b } from "react";
 import { TableFilterPanelPresenter as m } from "./table_filter_panel_presenter.js";
 import { Aside as p } from "@tcn/ui/surfaces";
-import { Header as d, Body as y, Scaffold as h, Section as u } from "@tcn/ui/layouts";
-import { Spacer as P } from "@tcn/ui/stacks";
-import { Button as F } from "@tcn/ui/actions";
-import { CrossIcon as x } from "@tcn/icons/cross_icon.js";
-import { Title as S } from "@tcn/ui/typography";
-import '../../table_filter_panel.css';const T = "_table-filter-panel-body_c016eb0", _ = "_table-filter-panel-section_cfd2eb9", r = { "table-filter-panel-body": T, "table-filter-panel-section": _ };
-function I({
+import { Header as d, Scaffold as u, Section as y } from "@tcn/ui/layouts";
+import { Spacer as h } from "@tcn/ui/stacks";
+import { Button as P } from "@tcn/ui/actions";
+import { CrossIcon as F } from "@tcn/icons/cross_icon.js";
+import { Title as x } from "@tcn/ui/typography";
+import '../../table_filter_panel.css';const S = "_table-filter-panel-body_c016eb0", T = "_table-filter-panel-section_cfd2eb9", r = { "table-filter-panel-body": S, "table-filter-panel-section": T };
+function H({
   children: n,
   dataSource: i,
   className: a,
@@ -17,32 +17,32 @@ function I({
   ...c
 }) {
   const [s] = b(() => new m(i));
-  return /* @__PURE__ */ e(B.Provider, { value: s, children: /* @__PURE__ */ l(p, { className: `tcn-table-filter-panel ${a}`, ...c, children: [
+  return /* @__PURE__ */ e(_.Provider, { value: s, children: /* @__PURE__ */ l(p, { className: `tcn-table-filter-panel ${a}`, ...c, children: [
     /* @__PURE__ */ l(d, { children: [
-      /* @__PURE__ */ e(S, { children: o }),
-      /* @__PURE__ */ e(P, {}),
-      t && /* @__PURE__ */ e(F, { utility: !0, hierarchy: "tertiary", onClick: t, children: /* @__PURE__ */ e(x, {}) })
+      /* @__PURE__ */ e(x, { children: o }),
+      /* @__PURE__ */ e(h, {}),
+      t && /* @__PURE__ */ e(P, { utility: !0, hierarchy: "tertiary", onClick: t, children: /* @__PURE__ */ e(F, {}) })
     ] }),
     /* @__PURE__ */ e(
-      y,
+      u,
       {
         className: `${r["table-filter-panel-body"]} tcn-table-filter-panel-body`,
-        children: /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
-          u,
+        children: /* @__PURE__ */ e(
+          y,
           {
             className: `${r["table-filter-panel-section"]} tcn-table-filter-panel-section`,
             children: n
           }
-        ) })
+        )
       }
     )
   ] }) });
 }
-const B = f(
+const _ = f(
   null
 );
 export {
-  I as TableFilterPanel,
-  B as TableFilterPanelContext
+  H as TableFilterPanel,
+  _ as TableFilterPanelContext
 };
 //# sourceMappingURL=table_filter_panel.js.map

package/dist/components/table_filter_panel/table_filter_panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Aside, type PanelProps } from '@tcn/ui/surfaces';\nimport { Body, Header, Scaffold, Section } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Title } from '@tcn/ui/typography';\n\nexport interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n  title?: string;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  title = 'Table Filters',\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>\n        <Header>\n          <Title>{title}</Title>\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <Body\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Scaffold>\n            <Section\n              className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n            >\n              {children}\n            </Section>\n          </Scaffold>\n        </Body>\n      </Aside>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","title","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Aside","Header","Title","Spacer","Button","CrossIcon","Body","styles","Scaffold","Section","createContext"],"mappings":";;;;;;;;;;AAmBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BP,CAAU,CAChD;AAED,SACE,gBAAAQ,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,0BAA0BV,CAAS,IAAK,GAAGG,GAC3D,UAAA;AAAA,IAAA,gBAAAM,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAJ,EAACK,KAAO,UAAAV,EAAA,CAAM;AAAA,wBACbW,GAAA,EAAO;AAAA,MACPZ,KACC,gBAAAM,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASb,GAC5C,UAAA,gBAAAM,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,WAAW,GAAGC,EAAO,yBAAyB,CAAC;AAAA,QAE/C,4BAACC,GAAA,EACC,UAAA,gBAAAX;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,WAAW,GAAGF,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAnB;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMU,IAA0BY;AAAA,EACrC;AACF;"}
+{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Aside, type PanelProps } from '@tcn/ui/surfaces';\nimport { Header, Scaffold, Section } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Title } from '@tcn/ui/typography';\n\nexport interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n  title?: string;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  title = 'Table Filters',\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>\n        <Header>\n          <Title>{title}</Title>\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <Scaffold\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Section\n            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n          >\n            {children}\n          </Section>\n        </Scaffold>\n      </Aside>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","title","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Aside","Header","Title","Spacer","Button","CrossIcon","Scaffold","styles","Section","createContext"],"mappings":";;;;;;;;;;AAmBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BP,CAAU,CAChD;AAED,SACE,gBAAAQ,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,0BAA0BV,CAAS,IAAK,GAAGG,GAC3D,UAAA;AAAA,IAAA,gBAAAM,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAJ,EAACK,KAAO,UAAAV,EAAA,CAAM;AAAA,wBACbW,GAAA,EAAO;AAAA,MACPZ,KACC,gBAAAM,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASb,GAC5C,UAAA,gBAAAM,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,WAAW,GAAGC,EAAO,yBAAyB,CAAC;AAAA,QAE/C,UAAA,gBAAAV;AAAA,UAACW;AAAA,UAAA;AAAA,YACC,WAAW,GAAGD,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMU,IAA0BW;AAAA,EACrC;AACF;"}

package/dist/mulit_select_field_filter.css

@@ -0,0 +1 @@
+@layer tcn-system{._multiselect-filter_193bbb6 .tcn-multiselect-values-container{padding:0}}

package/dist/table.css

@@ -1 +1 @@
-._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;table-layout:fixed;display:table}._table-body_b8c928c thead th,._table-body_b8c928c thead td{padding:0}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=start],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=start]{border-inline-end:1px solid #ccc}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=end],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=end]{border-inline-start:1px solid #ccc}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c th>div{display:flex;align-items:center}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c td,._table-body_b8c928c th{vertical-align:middle}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}
+._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;table-layout:fixed;display:table}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=start],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=start]{border-inline-end:1px solid #ccc}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=end],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=end]{border-inline-start:1px solid #ccc}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c thead tr th{padding-inline:0!important}._table-body_b8c928c thead tr th>div>*{padding-inline:var(--padding-medium)}._table-body_b8c928c thead tr th:first-child>div>*{padding-inline-start:var(--table-pad-inline)}._table-body_b8c928c thead tr th:last-child>div>*{padding-inline-end:var(--table-pad-inline)}._table-body_b8c928c th>div{display:flex;align-items:center}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c td,._table-body_b8c928c th{vertical-align:middle}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -39,11 +39,11 @@
   ],
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
+    "@tcn/state": "1.3.3",
     "@tcn/aip-160": "1.2.5",
     "@tcn/icons": "2.3.0",
-    "@tcn/resource-store": "2.5.6",
-    "@tcn/state": "1.3.2",
-    "@tcn/ui": "0.13.0"
+    "@tcn/resource-store": "2.5.7",
+    "@tcn/ui": "0.14.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -53,21 +53,21 @@
     "start": "pnpm storybook",
     "build": "vite build",
     "clean": "rm -rf dist storybook-static",
-    "clean-all": "pnpm clean && rm -rf node_modules",
+    "clean:all": "pnpm clean && rm -rf node_modules",
     "test": "vitest run",
-    "test-coverage": "vitest run --coverage",
-    "check-all": "concurrently 'pnpm check-types' 'pnpm run biome check .'",
-    "check-types": "tsc --project tsconfig.typecheck.json --noEmit",
-    "check-format": "pnpm run biome format .",
-    "check-lint": "pnpm run biome lint .",
-    "check-imports": "pnpm run biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
-    "fix-all": "pnpm run biome check --write",
-    "fix-format": "pnpm run biome format --write",
-    "fix-lint": "pnpm run biome lint --write",
-    "fix-imports": "pnpm run biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
-    "publish-dry-run": "pnpm build && pnpm publish --dry-run --force --no-git-checks",
+    "test:coverage": "vitest run --coverage",
+    "check:all": "concurrently 'pnpm check:types' 'pnpm run biome check .'",
+    "check:types": "tsc --project tsconfig.typecheck.json --noEmit",
+    "check:format": "pnpm run biome format .",
+    "check:lint": "pnpm run biome lint .",
+    "check:imports": "pnpm run biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "fix:all": "pnpm run biome check --write",
+    "fix:format": "pnpm run biome format --write",
+    "fix:lint": "pnpm run biome lint --write",
+    "fix:imports": "pnpm run biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "publish:dry-run": "pnpm build && pnpm publish --dry-run --force --no-git-checks",
     "biome": "pnpm exec biome",
-    "storybook": "bash ../../scripts/ensure-addon-built.sh && storybook dev",
+    "storybook": "bash ../../scripts/ensure-blackcat-addon-built.sh && storybook dev",
     "storybook:silent": "storybook dev --no-open --disable-telemetry --quiet",
     "storybook:build": "storybook build"
   }

package/src/__stories__/sample_data.ts

@@ -1,3 +1,25 @@
+export const OCCUPATIONS = [
+  'Adventurer',
+  'Artist',
+  'Assassin',
+  'Chef',
+  'Child',
+  'Detective',
+  'King',
+  'Merchant',
+  'Mistborn',
+  'Musician',
+  'Queen',
+  'Scientist',
+  'Soldier',
+  'Soother',
+  'Student',
+  'Tin-eye',
+  'Writer',
+] as const;
+
+export type Occupation = (typeof OCCUPATIONS)[number];
+
 export type DataItem = {
   id: string;
   name: string;
@@ -6,12 +28,12 @@ export type DataItem = {
   email: string;
   city: string;
   country: string;
-  occupation: string;
+  occupation: Occupation;
   isActive: boolean;
   birthdate: Date;
 };
 
-export const items = [
+export const items: DataItem[] = [
   {
     id: 'one',
     name: 'Sam Spade And the Longest Name that you have ever seen and it will just keep going cause we are going to test the table and see how it handles this',
@@ -1370,7 +1392,7 @@ export const items = [
   },
 ];
 
-export const stickyItems = [
+export const stickyItems: DataItem[] = [
   {
     id: 'two',
     name: 'Milo',

package/src/__stories__/table.stories.tsx

@@ -3,14 +3,16 @@ import React, { useCallback, useState } from 'react';
 
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import {
+  type DataSource,
   StaticDataSource,
   StaticDateField,
   StaticNumberField,
   StaticStringField,
 } from '@tcn/resource-store';
-import { useSignalValue } from '@tcn/state';
+import { Signal, useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
-import { Footer, Header, Rail, Side, Body } from '@tcn/ui/layouts';
+import { Checkbox } from '@tcn/ui/inputs';
+import { Footer, Header, Rail, Side, Scaffold } from '@tcn/ui/layouts';
 import { Box, HStack, Spacer, VStack, ZStack } from '@tcn/ui/stacks';
 import { Panel } from '@tcn/ui/surfaces';
 import { Title } from '@tcn/ui/typography';
@@ -18,12 +20,14 @@ import { GlobalSearch } from '../components/global_search.js';
 import { Table } from '../components/table/table.js';
 import { TableColumn } from '../components/table/table_column.js';
 import { DateFieldFilter } from '../components/table_filter_panel/field_filters/date_field_filter.js';
+import { MulitSelectFieldFilter } from '../components/table_filter_panel/field_filters/mulit_select_field_filter.js';
 import { NumberFieldFilter } from '../components/table_filter_panel/field_filters/number_field_filter.js';
 import { NumberRangeFieldFilter } from '../components/table_filter_panel/field_filters/number_range_field_filter.js';
+import { SelectFieldFilter } from '../components/table_filter_panel/field_filters/select_field_filter.js';
 import { StringFieldFilter } from '../components/table_filter_panel/field_filters/string_field_filter.js';
 import { TableFilterPanel } from '../components/table_filter_panel/table_filter_panel.js';
 import { TablePager } from '../components/table_pager.js';
-import { DataItem, items, stickyItems } from './sample_data.js';
+import { DataItem, items, OCCUPATIONS, stickyItems } from './sample_data.js';
 import styles from './table.module.css';
 
 const meta: Meta = {
@@ -308,7 +312,7 @@ export function WithTableHeaderAndTableFooter() {
           <Spacer />
           <GlobalSearch dataSource={source} />
         </Header>
-        <Body height="flex">
+        <Scaffold>
           <Table
             dataSource={source}
             onRowClick={item => {
@@ -323,7 +327,7 @@ export function WithTableHeaderAndTableFooter() {
             <TableColumn heading="Occupation" fieldName="occupation" />
             <TableColumn heading="Active" fieldName="isActive" />
           </Table>
-        </Body>
+        </Scaffold>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -411,40 +415,49 @@ export function WithFilterPanel() {
     <StoryWrapper>
       <Panel height="100%">
         <Header>The Table</Header>
-        <Body>
-          <Rail>
-            {/* TODO: Refactor to remove duplicate column logic (outer Side and inner Aside - in TableFilterPanel ) */}
-            <Side padding="0px">
-              <Box minWidth="300px" enableResizeOnEnd height="100%" maxHeight="100%">
-                <TableFilterPanel
-                  dataSource={source}
-                  onClose={() => window.alert('onClose callback called.')}
-                >
-                  <StringFieldFilter fieldName="name" label="Name (string)" />
-                  <NumberFieldFilter fieldName="age" label="Age (number)" />
-                  <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
-                  <NumberRangeFieldFilter fieldName="age" label="Age (number range)" />
-                </TableFilterPanel>
-              </Box>
-            </Side>
-            <Body>
-              <Table dataSource={source} height="100%">
-                <TableColumn heading="Name" fieldName="name" sticky="start" />
-                <TableColumn heading="Age" fieldName="age" width={150} canSort />
-                <TableColumn heading="Email" fieldName="email" width={300} />
-                <TableColumn heading="City" fieldName="city" width={300} />
-                <TableColumn
-                  heading="Birthdate"
-                  fieldName="birthdate"
-                  width={300}
-                  render={(i: DataItem) => i.birthdate.toLocaleDateString()}
+        <Rail>
+          {/* TODO: Refactor to remove duplicate column logic (outer Side and inner Aside - in TableFilterPanel ) */}
+          <Side padding="0px">
+            <Box minWidth="300px" enableResizeOnEnd height="100%" maxHeight="100%">
+              <TableFilterPanel
+                dataSource={source}
+                onClose={() => window.alert('onClose callback called.')}
+              >
+                <StringFieldFilter fieldName="name" label="Name (string)" />
+                <NumberFieldFilter fieldName="age" label="Age (number)" />
+                <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
+                <NumberRangeFieldFilter fieldName="age" label="Age (number range)" />
+                <SelectFieldFilter
+                  fieldName="isActive"
+                  label="Active (select)"
+                  options={[
+                    { label: 'Active', value: 'Yes' },
+                    { label: 'Inactive', value: 'No' },
+                  ]}
+                />
+                <MulitSelectFieldFilter
+                  fieldName="occupation"
+                  label="Occupation (multi-select)"
+                  options={OCCUPATIONS.map(o => ({ label: o, value: o }))}
                 />
-                <TableColumn heading="Occupation" fieldName="occupation" width={200} />
-                <TableColumn heading="Active" fieldName="isActive" />
-              </Table>
-            </Body>
-          </Rail>
-        </Body>
+              </TableFilterPanel>
+            </Box>
+          </Side>
+          <Table dataSource={source} height="100%">
+            <TableColumn heading="Name" fieldName="name" sticky="start" />
+            <TableColumn heading="Age" fieldName="age" width={150} canSort />
+            <TableColumn heading="Email" fieldName="email" width={300} />
+            <TableColumn heading="City" fieldName="city" width={300} />
+            <TableColumn
+              heading="Birthdate"
+              fieldName="birthdate"
+              width={300}
+              render={(i: DataItem) => i.birthdate.toLocaleDateString()}
+            />
+            <TableColumn heading="Occupation" fieldName="occupation" width={200} />
+            <TableColumn heading="Active" fieldName="isActive" />
+          </Table>
+        </Rail>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -453,4 +466,148 @@ export function WithFilterPanel() {
   );
 }
 
+// Selection Table
+
+type SelectionStatus = 'none' | 'some' | 'all';
+
+class SelectionPresenter<T extends { id: string }> {
+  private _selected = new Signal<Set<string>>(new Set());
+  private _status = new Signal<SelectionStatus>('none');
+  private _dataSource: DataSource<T>;
+
+  constructor(dataSource: DataSource<T>) {
+    this._dataSource = dataSource;
+  }
+
+  get broadcasts() {
+    return {
+      selected: this._selected.broadcast,
+      status: this._status.broadcast,
+    };
+  }
+
+  private getTotalRowCount(): number {
+    return this._dataSource.broadcasts.currentResults.get().length;
+  }
+
+  private getSelectedCount(): number {
+    return this._selected.get().size;
+  }
+
+  private getNextStatus() {
+    const selectedCount = this.getSelectedCount();
+    const totalCount = this.getTotalRowCount();
+    if (selectedCount === totalCount) return 'all';
+    if (selectedCount === 0) return 'none';
+    if (selectedCount < totalCount) return 'some';
+    return 'none';
+  }
+
+  private setStatus() {
+    const status = this.getNextStatus();
+    this._status.set(status);
+  }
+
+  toggleRow(row: T) {
+    this._selected.transform(selected => {
+      if (selected.has(row.id)) selected.delete(row.id);
+      else selected.add(row.id);
+      return selected;
+    });
+    this.setStatus();
+  }
+
+  private getAllIds(): string[] {
+    return this._dataSource.broadcasts.currentResults.get().map((r: T) => r.id);
+  }
+
+  toggleAllRows() {
+    const status = this._status.get();
+    if (status === 'all') {
+      this._selected.set(new Set());
+    } else {
+      this._selected.set(new Set(this.getAllIds()));
+    }
+    this.setStatus();
+  }
+}
+
+const RowCheck = ({
+  item,
+  presenter,
+}: {
+  item: DataItem;
+  presenter: SelectionPresenter<DataItem>;
+}) => {
+  const selected = useSignalValue(presenter.broadcasts.selected);
+  const status = useSignalValue(presenter.broadcasts.status);
+  const isChecked = selected.has(item.id) || status === 'all';
+  return <Checkbox checked={isChecked} onChange={() => presenter.toggleRow(item)} />;
+};
+
+const ColumnCheck = ({ presenter }: { presenter: SelectionPresenter<DataItem> }) => {
+  const status = useSignalValue(presenter.broadcasts.status);
+  const isChecked = status === 'all';
+
+  return (
+    <Checkbox
+      checked={isChecked}
+      data-indeterminate={status === 'some'}
+      onChange={() => presenter.toggleAllRows()}
+      onClick={e => e.stopPropagation()}
+    />
+  );
+};
+
+/**
+ * Demonstrates row selection with a checkbox column.
+ *
+ * Recommendation: set `canResize={false}` on fixed-width utility columns (e.g. checkboxes,
+ * icons, actions). The resize handle overlaps narrow column content and the column has no
+ * meaningful width to expose to the user.
+ */
+export function SelectionTable() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('id', i => i.id),
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  const [presenter] = useState(() => new SelectionPresenter<DataItem>(source));
+
+  return (
+    <StoryWrapper>
+      <Panel>
+        <Header>Selection Table</Header>
+        <Scaffold>
+          <Table dataSource={source}>
+            {/* canResize={false} recommended for fixed-width utility columns — resize handle overlaps narrow content */}
+            <TableColumn
+              heading={<ColumnCheck presenter={presenter} />}
+              sticky="start"
+              width={48}
+              canResize={false}
+              render={(item: DataItem) => <RowCheck item={item} presenter={presenter} />}
+            />
+            <TableColumn heading="Name" fieldName="name" />
+            <TableColumn heading="Age" fieldName="age" />
+            <TableColumn heading="Email" fieldName="email" />
+            <TableColumn heading="City" fieldName="city" />
+            <TableColumn heading="Country" fieldName="country" />
+            <TableColumn heading="Occupation" fieldName="occupation" />
+            <TableColumn heading="Active" fieldName="isActive" />
+          </Table>
+        </Scaffold>
+      </Panel>
+    </StoryWrapper>
+  );
+}
+
 export default meta;

package/src/components/cells/header_cell.tsx

@@ -34,17 +34,18 @@ export function HeaderCell({
 
   return (
     <TH
-      className={cellStyles['table-cell']}
+      className={`tcn-header-cell ${cellStyles['table-cell']}`}
       data-stick-to={sticky}
       style={{ width: `${width}px`, zIndex }}
     >
       <Box
-        padding="0px 8px" // FIXME: should be on theme ideally.
+        className="tcn-table-cell-content"
         overflow="hidden"
         minWidth="24px"
         maxWidth="unset"
+        height="100%"
         width={width}
-        enableResizeOnEnd
+        enableResizeOnEnd={onResize != null}
         onWidthResize={handleResize}
         onClick={e => e.stopPropagation()}
       >

package/src/components/table/table.module.css

@@ -8,16 +8,6 @@
   display: table;
 }
 
-/* FIXME: These styles should be handled at the theme level
-   but tcn ui does not handle resizing or sticky logic. */
-/* Reset padding for header - due to resize logic  */
-.table-body thead {
-  th,
-  td {
-    padding: 0;
-  }
-}
-
 .table-body thead tr,
 .table-body tbody tr {
   th[data-stick-to="start"],
@@ -59,6 +49,26 @@
   z-index: 2;
 }
 
+/* Shim: #277 — remove when #283 is resolved (Resizeable decorator on TH replaces this).
+ * Theme padding-inline on thead th conflicts with the resize Box sizing — the Box has the
+ * same fixed width as the TH, so theme padding causes the Box to overflow the TH content
+ * area, pushing the resize handle and sort action out of alignment.
+ * Zero out padding on the TH and re-apply it on the inner content child (under the Box)
+ * so it doesn't affect Box width or resize handle position. */
+.table-body thead tr th {
+  padding-inline: 0 !important;
+}
+.table-body thead tr th > div > * {
+  padding-inline: var(--padding-medium);
+}
+.table-body thead tr th:first-child > div > * {
+  padding-inline-start: var(--table-pad-inline);
+}
+.table-body thead tr th:last-child > div > * {
+  padding-inline-end: var(--table-pad-inline);
+}
+/* End shim: #277 */
+
 .table-body th > div {
   display: flex;
   align-items: center;

package/src/components/table/table.tsx

@@ -72,6 +72,7 @@ export function Table<T>({
           width: column.props.width ?? 100,
           sortMode: 'none',
           canSort: column.props.canSort ?? false,
+          canResize: column.props.canResize ?? true,
           heading: column.props.heading,
           footer: column.props.footer,
           sticky: column.props.sticky,
@@ -107,7 +108,11 @@ export function Table<T>({
                 index={index}
                 heading={wrapContent(column.heading)}
                 sticky={column.sticky}
-                onResize={newSize => presenter.setColumnWidth(index, newSize)}
+                onResize={
+                  column.canResize !== false
+                    ? newSize => presenter.setColumnWidth(index, newSize)
+                    : undefined
+                }
                 width={column.width}
                 sortMode={column.sortMode}
                 onSortModeChange={() => presenter.setNextColumnSortMode(index)}

package/src/components/table/table_column.tsx

@@ -4,6 +4,7 @@ type BaseTableColumnProps<T> = {
   render?: (item: T) => React.ReactNode;
   sticky?: 'start' | 'end';
   width?: number;
+  canResize?: boolean;
 };
 
 type SortableTableColumnProps<T> = BaseTableColumnProps<T> & {

package/src/components/table/table_presenter.ts

@@ -16,6 +16,7 @@ export type ColumnInfo = {
   footer?: ReactNode;
   sticky?: 'start' | 'end';
   fieldName?: string;
+  canResize?: boolean;
 };
 
 export class TablePresenter {

package/src/components/table_filter_panel/field_filters/mulit_select_field_filter.module.css

@@ -0,0 +1,8 @@
+@layer tcn-system {
+  /* FIXME: MultiselectValues renders with padding: 4px and min-width: 100% (content-box),
+     causing it to overflow its parent. Zeroing the padding here as a local workaround until
+     the component supports box-sizing: border-box or a className passthrough. */
+  .multiselect-filter :global(.tcn-multiselect-values-container) {
+    padding: 0;
+  }
+}