@tcn/ui-table 2.4.1 → 2.4.3

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}: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.1",
+  "version": "2.4.3",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -40,10 +40,10 @@
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/state": "1.3.2",
-    "@tcn/resource-store": "2.5.6",
     "@tcn/icons": "2.3.0",
-    "@tcn/ui": "0.13.1"
+    "@tcn/state": "1.3.3",
+    "@tcn/ui": "0.15.0",
+    "@tcn/resource-store": "2.5.7"
   },
   "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

@@ -12,7 +12,7 @@ import {
 import { Signal, useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
 import { Checkbox } from '@tcn/ui/inputs';
-import { Footer, Header, Rail, Side, Body } from '@tcn/ui/layouts';
+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';
@@ -20,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 = {
@@ -310,7 +312,7 @@ export function WithTableHeaderAndTableFooter() {
           <Spacer />
           <GlobalSearch dataSource={source} />
         </Header>
-        <Body height="flex">
+        <Scaffold>
           <Table
             dataSource={source}
             onRowClick={item => {
@@ -325,7 +327,7 @@ export function WithTableHeaderAndTableFooter() {
             <TableColumn heading="Occupation" fieldName="occupation" />
             <TableColumn heading="Active" fieldName="isActive" />
           </Table>
-        </Body>
+        </Scaffold>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -413,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>
@@ -548,6 +559,13 @@ const ColumnCheck = ({ presenter }: { presenter: SelectionPresenter<DataItem> })
   );
 };
 
+/**
+ * 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, [
@@ -568,12 +586,14 @@ export function SelectionTable() {
     <StoryWrapper>
       <Panel>
         <Header>Selection Table</Header>
-        <Body>
+        <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" />
@@ -584,7 +604,7 @@ export function SelectionTable() {
             <TableColumn heading="Occupation" fieldName="occupation" />
             <TableColumn heading="Active" fieldName="isActive" />
           </Table>
-        </Body>
+        </Scaffold>
       </Panel>
     </StoryWrapper>
   );

package/src/components/cells/header_cell.tsx

@@ -43,8 +43,9 @@ export function HeaderCell({
         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

@@ -49,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;
+  }
+}

package/src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx

@@ -1,11 +1,10 @@
 import { useSignalValue } from '@tcn/state';
 import { Multiselect, Option } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { Title } from '@tcn/ui/typography';
 import { FieldFilterProps } from './field_filter_props.js';
 import { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
-import { ClearFilterButton } from './clear_button.js';
+import { ClearableField } from './clearable_field.js';
+import styles from './mulit_select_field_filter.module.css';
 
 export type MulitSelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -25,38 +24,28 @@ export function MulitSelectFieldFilter({
       .filter(Boolean) ?? [];
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack>
-        <Box width="flex">
-          <Multiselect
-            value={selectedLabels}
-            onChange={selectedLabels => {
-              const realValues = selectedLabels
-                .map(label => options.find(option => option.label === label)?.value)
-                .filter(value => value !== undefined) as (string | boolean | number)[];
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={values == null || values.length === 0}
+      className={styles['multiselect-filter']}
+    >
+      <Multiselect
+        value={selectedLabels}
+        onChange={selectedLabels => {
+          const realValues = selectedLabels
+            .map(label => options.find(option => option.label === label)?.value)
+            .filter(value => value !== undefined) as (string | boolean | number)[];
 
-              presenter.setValue(realValues.length > 0 ? realValues : null);
-            }}
-          >
-            {options.map(option => (
-              <Option
-                key={option.value.toString()}
-                value={option.label}
-                label={option.label}
-              >
-                {option.label}
-              </Option>
-            ))}
-          </Multiselect>
-        </Box>
-        <ClearFilterButton
-          onClick={() => presenter.setValue(null)}
-          disabled={values == null || values.length === 0}
-        />
-      </HStack>
-    </VStack>
+          presenter.setValue(realValues.length > 0 ? realValues : null);
+        }}
+      >
+        {options.map(option => (
+          <Option key={option.value.toString()} value={option.label} label={option.label}>
+            {option.label}
+          </Option>
+        ))}
+      </Multiselect>
+    </ClearableField>
   );
 }

package/src/components/table_filter_panel/field_filters/select_field_filter.tsx

@@ -1,11 +1,9 @@
 import { useSignalValue } from '@tcn/state';
 import { Option, Select } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { Title } from '@tcn/ui/typography';
 import { FieldFilterProps } from './field_filter_props.js';
 import { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
-import { ClearFilterButton } from './clear_button.js';
+import { ClearableField } from './clearable_field.js';
 
 export type SelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -18,34 +16,25 @@ export function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilt
   const valueLabel = options.find(option => option.value === value)?.label ?? '';
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack>
-        <Select
-          value={valueLabel}
-          onChange={value => {
-            const realValue = options.find(option => option.label === value)?.value;
-            presenter.setValue(realValue ?? null);
-          }}
-          width="flex"
-        >
-          {options.map(option => (
-            <Option
-              key={option.value.toString()}
-              value={option.label}
-              label={option.label}
-            >
-              {option.label}
-            </Option>
-          ))}
-        </Select>
-        <ClearFilterButton
-          onClick={() => presenter.setValue(null)}
-          disabled={value == null}
-        />
-      </HStack>
-    </VStack>
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={value == null}
+    >
+      <Select
+        value={valueLabel}
+        onChange={value => {
+          const realValue = options.find(option => option.label === value)?.value;
+          presenter.setValue(realValue ?? null);
+        }}
+        width="flex"
+      >
+        {options.map(option => (
+          <Option key={option.value.toString()} value={option.label} label={option.label}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+    </ClearableField>
   );
 }