@hisptz/dhis2-analytics 2.0.32 → 2.0.33

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/TableHeader.js

@@ -2,16 +2,15 @@ import { jsx } from 'react/jsx-runtime';
 import { useTableState } from '../../../TableStateProvider';
 import { DataTableHead, DataTableRow } from '@dhis2/ui';
 import { flexRender } from '@tanstack/react-table';
+import { memo, Fragment } from 'react';
 
-function TableHeader() {
+const TableHeader = memo(function TableHeaderComponent() {
   const table = useTableState();
-  return /* @__PURE__ */ jsx(DataTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(DataTableRow, { children: headerGroup.headers.map(
-    (header) => flexRender(
-      header.column.columnDef.header,
-      header.getContext()
-    )
-  ) }, headerGroup.id)) });
-}
+  return /* @__PURE__ */ jsx(DataTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(DataTableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Fragment, { children: flexRender(
+    header.column.columnDef.header,
+    header.getContext()
+  ) }, `${header.id}-fragment`)) }, headerGroup.id)) });
+});
 
 export { TableHeader };
 //# sourceMappingURL=out.js.map

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/TableHeader.tsx"],"names":[],"mappings":"AAUI;AAVJ,SAAS,qBAAqB;AAC9B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AAEpB,SAAS,cAAc;AAC7B,QAAM,QAAQ,cAAc;AAE5B,SACC,oBAAC,iBACC,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC7B,oBAAC,gBACC,sBAAY,QAAQ;AAAA,IAAI,CAAC,WACzB;AAAA,MACC,OAAO,OAAO,UAAU;AAAA,MACxB,OAAO,WAAW;AAAA,IACnB;AAAA,EACD,KANkB,YAAY,EAO/B,CACA,GACF;AAEF","sourcesContent":["import { useTableState } from \"../../../TableStateProvider\";\nimport { DataTableHead, DataTableRow } from \"@dhis2/ui\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nexport function TableHeader() {\n\tconst table = useTableState();\n\n\treturn (\n\t\t<DataTableHead>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<DataTableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) =>\n\t\t\t\t\t\tflexRender(\n\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</DataTableRow>\n\t\t\t))}\n\t\t</DataTableHead>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/TableHeader.tsx"],"names":[],"mappings":"AAaM;AAbN,SAAS,qBAAqB;AAC9B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,kBAAkB;AAC3B,SAAS,UAAU,YAAY;AAExB,MAAM,cAAc,KAAK,SAAS,uBAAuB;AAC/D,QAAM,QAAQ,cAAc;AAE5B,SACC,oBAAC,iBACC,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC7B,oBAAC,gBACC,sBAAY,QAAQ,IAAI,CAAC,WACzB,oBAAC,YACC;AAAA,IACA,OAAO,OAAO,UAAU;AAAA,IACxB,OAAO,WAAW;AAAA,EACnB,KAJc,GAAG,OAAO,EAAE,WAK3B,CACA,KARiB,YAAY,EAS/B,CACA,GACF;AAEF,CAAC","sourcesContent":["import { useTableState } from \"../../../TableStateProvider\";\nimport { DataTableHead, DataTableRow } from \"@dhis2/ui\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { Fragment, memo } from \"react\";\n\nexport const TableHeader = memo(function TableHeaderComponent() {\n\tconst table = useTableState();\n\n\treturn (\n\t\t<DataTableHead>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<DataTableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={`${header.id}-fragment`}>\n\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</DataTableRow>\n\t\t\t))}\n\t\t</DataTableHead>\n\t);\n});\n"]}

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.js

@@ -2,23 +2,21 @@ import { jsx } from 'react/jsx-runtime';
 import { DataTableColumnHeader } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import styles from '../TableHeader.module.css';
-import { useScorecardState } from '../../../../StateProvider';
+import { useScorecardStateSelector } from '../../../../StateProvider';
 
 function AverageHeaderCell({
-  header,
-  column
+  header
 }) {
-  const state = useScorecardState();
-  const hasOnePeriod = state?.hasOnePeriod;
-  const dataInRows = state?.options?.showDataInRows;
+  const dataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
+  const hasOnePeriod = useScorecardStateSelector(["hasOnePeriod"]);
   const rowSpan = dataInRows ? hasOnePeriod ? "2" : "2" : hasOnePeriod ? "2" : "3";
   return /* @__PURE__ */ jsx(
     DataTableColumnHeader,
     {
       align: "right",
-      onFilterIconClick: () => {
-      },
-      fixed: true,
       colSpan: header.colSpan.toString(),
       rowSpan,
       className: styles.metaHeader,

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.tsx"],"names":[],"mappings":"AAgCG;AA9BH,SAAS,6BAA6B;AACtC,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,SAAS,yBAAyB;AAE3B,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,QAAQ,kBAAkB;AAChC,QAAM,eAAe,OAAO;AAC5B,QAAM,aAAa,OAAO,SAAS;AACnC,QAAM,UAAU,aACb,eACC,MACA,MACD,eACC,MACA;AAEJ,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,OAAM;AAAA,MACN,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1B,OAAK;AAAA,MACL,SAAS,OAAO,QAAQ,SAAS;AAAA,MACjC;AAAA,MACA,WAAW,OAAO;AAAA,MAElB,8BAAC,OAAG,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,IARjB,OAAO;AAAA,EASb;AAEF","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { useScorecardState } from \"../../../../StateProvider\";\n\nexport function AverageHeaderCell({\n\theader,\n\tcolumn,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst state = useScorecardState();\n\tconst hasOnePeriod = state?.hasOnePeriod;\n\tconst dataInRows = state?.options?.showDataInRows;\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={header.id}\n\t\t\talign=\"right\"\n\t\t\tonFilterIconClick={() => {}}\n\t\t\tfixed\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t<b>{i18n.t(\"Average\")}</b>\n\t\t</DataTableColumnHeader>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.tsx"],"names":[],"mappings":"AA+BG;AA7BH,SAAS,6BAA6B;AACtC,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,SAAS,iCAAiC;AAEnC,SAAS,kBAAkB;AAAA,EACjC;AACD,GAA2C;AAC1C,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,eAAe,0BAAmC,CAAC,cAAc,CAAC;AACxE,QAAM,UAAU,aACb,eACC,MACA,MACD,eACC,MACA;AAEJ,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,OAAM;AAAA,MACN,SAAS,OAAO,QAAQ,SAAS;AAAA,MACjC;AAAA,MACA,WAAW,OAAO;AAAA,MAElB,8BAAC,OAAG,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,IANjB,OAAO;AAAA,EAOb;AAEF","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\n\nexport function AverageHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst hasOnePeriod = useScorecardStateSelector<boolean>([\"hasOnePeriod\"]);\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={header.id}\n\t\t\talign=\"right\"\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t<b>{i18n.t(\"Average\")}</b>\n\t\t</DataTableColumnHeader>\n\t);\n}\n"]}

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js

@@ -4,14 +4,22 @@ import { DataTableColumnHeader } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { DraggableCell } from '../../DraggableCell';
 import DroppableCell from '../../DroppableCell';
-import { useScorecardState } from '../../../../StateProvider';
+import { useScorecardStateSelector } from '../../../../StateProvider';
 
+function EmptyDataHeaderCell({
+  header
+}) {
+  const colSpan = header.colSpan.toString();
+  return /* @__PURE__ */ jsx(DataTableColumnHeader, { colSpan });
+}
 function DataHeaderCellComponent({
   column,
   header
 }) {
-  const state = useScorecardState();
-  const dataInRows = state?.options?.showDataInRows ?? false;
+  const dataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
   const label = header.column.columnDef.meta.label ?? column.columnDef.meta.label;
   const bold = header.column.columnDef.meta.bold ?? column.columnDef.meta.bold;
   const colSpan = header.colSpan.toString();
@@ -20,7 +28,6 @@ function DataHeaderCellComponent({
   return /* @__PURE__ */ jsx(
     DataTableColumnHeader,
     {
-      fixed: true,
       sortIconTitle: i18n.t("Sort {{nextSortType}}", { nextSortType }),
       onSortIconClick: header.column?.getCanSort() || column.getCanSort() ? (_, e) => {
         const sort = column.getToggleSortingHandler();
@@ -44,11 +51,12 @@ function DataHeaderCellComponent({
           )
         }
       )
-    }
+    },
+    `${label}`
   );
 }
 const DataHeaderCell = DataHeaderCellComponent;
 
-export { DataHeaderCell, DataHeaderCellComponent };
+export { DataHeaderCell, DataHeaderCellComponent, EmptyDataHeaderCell };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=DataHeaderCell.js.map

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":[],"mappings":"AA0Ea;AAzEb;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA0D;AACnE,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,yBAAyB;AAE3B,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,QAAQ,kBAAkB;AAEhC,QAAM,aAAa,OAAO,SAAS,kBAAkB;AACrD,QAAM,QACJ,OAAO,OAAO,UAAU,KAA2B,SACnD,OAAO,UAAU,KAA2B;AAE9C,QAAM,OACJ,OAAO,OAAO,UAAU,KAA4B,QACpD,OAAO,UAAU,KAA4B;AAE/C,QAAM,UAAU,OAAO,QAAQ,SAAS;AAExC,QAAM,gBAAgB,CAAC,QAAQ,YAAY,IACxC,YACC,OAAQ,YAAY;AACxB,QAAM,eACL,QAAQ,oBAAoB,MAAM,QAC/B,KAAK,EAAE,oBAAoB,IAC3B,QAAQ,oBAAoB,MAAM,SACjC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAK;AAAA,MACL,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,CAAC,GAAG,MAAM;AACV,cAAM,OAAO,OAAQ,wBAAwB;AAC7C,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD,IACC;AAAA,MAEJ,eACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,gBACA;AAAA,MAEJ,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,IAAI,IAC7B,CAAC,wBAAwB,EAAE;AAAA,UAG/B;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,KACxB,wBAAwB;AAAA,cAG3B,iBAAO,oBAAC,OAAG,iBAAM,IAAO;AAAA;AAAA,UAC1B;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,iBAAiB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardState } from \"../../../../StateProvider\";\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst state = useScorecardState();\n\n\tconst dataInRows = state?.options?.showDataInRows ?? false;\n\tconst label =\n\t\t(header.column.columnDef.meta as { label: string }).label ??\n\t\t(column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tfixed\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{bold ? <b>{label}</b> : label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":[],"mappings":"AAeQ;AAdR;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA0D;AACnE,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,iCAAiC;AAEnC,SAAS,oBAAoB;AAAA,EACnC;AACD,GAA2C;AAC1C,QAAM,UAAU,OAAO,QAAQ,SAAS;AACxC,SAAO,oBAAC,yBAAsB,SAAkB;AACjD;AAEO,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,QACJ,OAAO,OAAO,UAAU,KAA2B,SACnD,OAAO,UAAU,KAA2B;AAE9C,QAAM,OACJ,OAAO,OAAO,UAAU,KAA4B,QACpD,OAAO,UAAU,KAA4B;AAE/C,QAAM,UAAU,OAAO,QAAQ,SAAS;AAExC,QAAM,gBAAgB,CAAC,QAAQ,YAAY,IACxC,YACC,OAAQ,YAAY;AACxB,QAAM,eACL,QAAQ,oBAAoB,MAAM,QAC/B,KAAK,EAAE,oBAAoB,IAC3B,QAAQ,oBAAoB,MAAM,SACjC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,CAAC,GAAG,MAAM;AACV,cAAM,OAAO,OAAQ,wBAAwB;AAC7C,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD,IACC;AAAA,MAEJ,eACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,gBACA;AAAA,MAEJ,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,IAAI,IAC7B,CAAC,wBAAwB,EAAE;AAAA,UAG/B;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,KACxB,wBAAwB;AAAA,cAG3B,iBAAO,oBAAC,OAAG,iBAAM,IAAO;AAAA;AAAA,UAC1B;AAAA;AAAA,MACD;AAAA;AAAA,IApCK,GAAG,KAAK;AAAA,EAqCd;AAEF;AAEO,MAAM,iBAAiB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\n\nexport function EmptyDataHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = header.colSpan.toString();\n\treturn <DataTableColumnHeader colSpan={colSpan} />;\n}\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst label =\n\t\t(header.column.columnDef.meta as { label: string }).label ??\n\t\t(column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${label}`}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{bold ? <b>{label}</b> : label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/FilterArea.js

@@ -1,14 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import i18n from '@dhis2/d2-i18n';
-import { useScorecardState } from '../../../../StateProvider';
+import { useScorecardStateSelector } from '../../../../StateProvider';
 import { InputField } from '@dhis2/ui';
 import { useState, useEffect } from 'react';
 
 function FilterArea({ column }) {
   const defaultValue = column.getFilterValue();
   const [text, setText] = useState(defaultValue);
-  const state = useScorecardState();
-  const dataInRows = state?.options?.showDataInRows ?? false;
+  const dataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
   const searchPlaceholder = dataInRows ? i18n.t("Search data items") : i18n.t("Search organisation units");
   useEffect(() => {
     const timeout = setTimeout(() => {

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/FilterArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/FilterArea.tsx"],"names":[],"mappings":"AA8BE;AA5BF,OAAO,UAAU;AACjB,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,WAAW,gBAAgB;AAM7B,SAAS,WAAW,EAAE,OAAO,GAAoB;AACvD,QAAM,eAAe,OAAO,eAAe;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAA6B,YAAY;AACjE,QAAM,QAAQ,kBAAkB;AAChC,QAAM,aAAa,OAAO,SAAS,kBAAkB;AAErD,QAAM,oBAAoB,aACvB,KAAK,EAAE,mBAAmB,IAC1B,KAAK,EAAE,2BAA2B;AAErC,YAAU,MAAM;AACf,UAAM,UAAU,WAAW,MAAM;AAChC,aAAO,eAAe,IAAI;AAAA,IAC3B,GAAG,GAAG;AAEN,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,IAAI,CAAC;AAET,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,UAAU,CAAC,EAAE,MAAM,MAAM,QAAQ,KAAK;AAAA,MACtC,aAAa;AAAA;AAAA,EACd;AAEF","sourcesContent":["import type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport type { Column } from \"@tanstack/react-table\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardState } from \"../../../../StateProvider\";\nimport { InputField } from \"@dhis2/ui\";\nimport { useEffect, useState } from \"react\";\n\nexport interface FilterAreaProps {\n\tcolumn: Column<ScorecardTableData, any>;\n}\n\nexport function FilterArea({ column }: FilterAreaProps) {\n\tconst defaultValue = column.getFilterValue() as string | undefined;\n\tconst [text, setText] = useState<string | undefined>(defaultValue);\n\tconst state = useScorecardState();\n\tconst dataInRows = state?.options?.showDataInRows ?? false;\n\n\tconst searchPlaceholder = dataInRows\n\t\t? i18n.t(\"Search data items\")\n\t\t: i18n.t(\"Search organisation units\");\n\n\tuseEffect(() => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tcolumn.setFilterValue(text);\n\t\t}, 700);\n\n\t\treturn () => clearTimeout(timeout);\n\t}, [text]);\n\n\treturn (\n\t\t<InputField\n\t\t\tvalue={text}\n\t\t\tonChange={({ value }) => setText(value)}\n\t\t\tplaceholder={searchPlaceholder}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/FilterArea.tsx"],"names":[],"mappings":"AA+BE;AA7BF,OAAO,UAAU;AACjB,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,WAAW,gBAAgB;AAM7B,SAAS,WAAW,EAAE,OAAO,GAAoB;AACvD,QAAM,eAAe,OAAO,eAAe;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAA6B,YAAY;AACjE,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,oBAAoB,aACvB,KAAK,EAAE,mBAAmB,IAC1B,KAAK,EAAE,2BAA2B;AAErC,YAAU,MAAM;AACf,UAAM,UAAU,WAAW,MAAM;AAChC,aAAO,eAAe,IAAI;AAAA,IAC3B,GAAG,GAAG;AAEN,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,IAAI,CAAC;AAET,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,UAAU,CAAC,EAAE,MAAM,MAAM,QAAQ,KAAK;AAAA,MACtC,aAAa;AAAA;AAAA,EACd;AAEF","sourcesContent":["import type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport type { Column } from \"@tanstack/react-table\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\nimport { InputField } from \"@dhis2/ui\";\nimport { useEffect, useState } from \"react\";\n\nexport interface FilterAreaProps {\n\tcolumn: Column<ScorecardTableData, any>;\n}\n\nexport function FilterArea({ column }: FilterAreaProps) {\n\tconst defaultValue = column.getFilterValue() as string | undefined;\n\tconst [text, setText] = useState<string | undefined>(defaultValue);\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst searchPlaceholder = dataInRows\n\t\t? i18n.t(\"Search data items\")\n\t\t: i18n.t(\"Search organisation units\");\n\n\tuseEffect(() => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tcolumn.setFilterValue(text);\n\t\t}, 700);\n\n\t\treturn () => clearTimeout(timeout);\n\t}, [text]);\n\n\treturn (\n\t\t<InputField\n\t\t\tvalue={text}\n\t\t\tonChange={({ value }) => setText(value)}\n\t\t\tplaceholder={searchPlaceholder}\n\t\t/>\n\t);\n}\n"]}

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.js

@@ -3,13 +3,15 @@ import { ScorecardDraggableItems } from '../../../../../schemas/config';
 import { DataTableCell } from '@dhis2/ui';
 import DroppableCell from '../../DroppableCell';
 import { DraggableCell } from '../../DraggableCell';
-import { useScorecardState } from '../../../../StateProvider';
+import { useScorecardStateSelector } from '../../../../StateProvider';
 import { memo } from 'react';
 
 function LabelCellComponent(props) {
   const data = props.getValue().toString();
-  const state = useScorecardState();
-  const dataInRows = state?.options?.showDataInRows ?? false;
+  const dataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
   return /* @__PURE__ */ jsx(
     DataTableCell,
     {

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":[],"mappings":"AAkCI;AAjCJ;AAAA,EACC;AAAA,OAEM;AACP,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAEd,SAAS,mBACf,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,QAAQ,kBAAkB;AAChC,QAAM,aAAa,OAAO,SAAS,kBAAkB;AAErD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAK;AAAA,MACL,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,EAAE,IAC3B,CAAC,wBAAwB,IAAI;AAAA,UAGjC;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,OACxB,wBAAwB;AAAA,cAG3B;AAAA;AAAA,UACF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,YAAY,KAAK,kBAAkB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useScorecardState } from \"../../../../StateProvider\";\nimport { memo } from \"react\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst state = useScorecardState();\n\tconst dataInRows = state?.options?.showDataInRows ?? false;\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 200,\n\t\t\t}}\n\t\t\tfixed\n\t\t\tbordered\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{data}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = memo(LabelCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":[],"mappings":"AAoCI;AAnCJ;AAAA,EACC;AAAA,OAEM;AACP,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,YAAY;AAEd,SAAS,mBACf,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAK;AAAA,MACL,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,EAAE,IAC3B,CAAC,wBAAwB,IAAI;AAAA,UAGjC;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,OACxB,wBAAwB;AAAA,cAG3B;AAAA;AAAA,UACF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,YAAY,KAAK,kBAAkB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\nimport { memo } from \"react\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 200,\n\t\t\t}}\n\t\t\tfixed\n\t\t\tbordered\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{data}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = memo(LabelCellComponent);\n"]}

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { DataTableColumnHeader } from '@dhis2/ui';
-import { useScorecardState } from '../../../../StateProvider';
+import { useScorecardStateSelector } from '../../../../StateProvider';
 import i18n from '@dhis2/d2-i18n';
 import styles from '../TableHeader.module.css';
 import { FilterArea } from './FilterArea';
@@ -11,9 +11,11 @@ function MetaHeaderCellComponent({
   header
 }) {
   const randomId = useRef(uid());
-  const state = useScorecardState();
-  const hasOnePeriod = state?.hasOnePeriod ?? false;
-  const dataInRows = state?.options?.showDataInRows ?? false;
+  const hasOnePeriod = useScorecardStateSelector(["hasOnePeriod"]);
+  const dataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
   const rowSpan = dataInRows ? hasOnePeriod ? "2" : "2" : hasOnePeriod ? "2" : "3";
   const filterColumn = header.subHeaders.find(
     (header2) => header2.column.getCanFilter()
@@ -24,17 +26,14 @@ function MetaHeaderCellComponent({
     DataTableColumnHeader,
     {
       align: "right",
-      onFilterIconClick: () => {
-      },
       sortIconTitle: i18n.t("Sort {{nextSortType}}", { nextSortType }),
-      onSortIconClick: ({ direction }, e) => {
+      onSortIconClick: (_, e) => {
         const sort = filterColumn.getToggleSortingHandler();
         if (sort) {
           sort(e);
         }
       },
       sortDirection,
-      fixed: true,
       colSpan: header.colSpan.toString(),
       rowSpan,
       className: styles.metaHeader,

package/dist/esm/components/Scorecard/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.tsx"],"names":["header"],"mappings":"AA2DI;AAzDJ,SAAS,6BAA0D;AACnE,SAAS,yBAAyB;AAClC,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AACpB,SAAS,MAAM,cAAc;AAE7B,SAAS,wBAAwB;AAAA,EAChC;AACD,GAA2C;AAC1C,QAAM,WAAW,OAAe,IAAI,CAAC;AACrC,QAAM,QAAQ,kBAAkB;AAChC,QAAM,eAAe,OAAO,gBAAgB;AAC5C,QAAM,aAAa,OAAO,SAAS,kBAAkB;AAErD,QAAM,UAAU,aACb,eACC,MACA,MACD,eACC,MACA;AAEJ,QAAM,eAAe,OAAO,WAAW;AAAA,IAAK,CAACA,YAC5CA,QAAO,OAAO,aAAa;AAAA,EAC5B,GAAG;AAEH,QAAM,gBAAgB,CAAC,cAAc,YAAY,IAC9C,YACC,aAAc,YAAY;AAC9B,QAAM,eACL,cAAc,oBAAoB,MAAM,QACrC,KAAK,EAAE,oBAAoB,IAC3B,cAAc,oBAAoB,MAAM,SACvC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,OAAM;AAAA,MACN,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1B,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM;AACtC,cAAM,OAAO,aAAc,wBAAwB;AACnD,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD;AAAA,MACA;AAAA,MACA,OAAK;AAAA,MACL,SAAS,OAAO,QAAQ,SAAS;AAAA,MACjC;AAAA,MACA,WAAW,OAAO;AAAA,MAEjB,WAAC,CAAC,gBACF;AAAA,QAAC;AAAA;AAAA,UAEA,QAAQ;AAAA;AAAA,QADH,GAAG,OAAO,EAAE;AAAA,MAElB;AAAA;AAAA,IApBI,GAAG,OAAO,EAAE,IAAI,SAAS,OAAO;AAAA,EAsBtC;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport { useScorecardState } from \"../../../../StateProvider\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { FilterArea } from \"./FilterArea\";\nimport { uid } from \"@hisptz/dhis2-utils\";\nimport { memo, useRef } from \"react\";\n\nfunction MetaHeaderCellComponent({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst randomId = useRef<string>(uid());\n\tconst state = useScorecardState();\n\tconst hasOnePeriod = state?.hasOnePeriod ?? false;\n\tconst dataInRows = state?.options?.showDataInRows ?? false;\n\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\tconst filterColumn = header.subHeaders.find((header) =>\n\t\theader.column.getCanFilter(),\n\t)?.column;\n\n\tconst sortDirection = !filterColumn?.getIsSorted()\n\t\t? \"default\"\n\t\t: (filterColumn!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tfilterColumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: filterColumn?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${header.id}-${randomId.current}`}\n\t\t\talign=\"right\"\n\t\t\tonFilterIconClick={() => {}}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={({ direction }, e) => {\n\t\t\t\tconst sort = filterColumn!.getToggleSortingHandler();\n\t\t\t\tif (sort) {\n\t\t\t\t\tsort(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tsortDirection={sortDirection}\n\t\t\tfixed\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t{!!filterColumn && (\n\t\t\t\t<FilterArea\n\t\t\t\t\tkey={`${header.id}-filter-area`}\n\t\t\t\t\tcolumn={filterColumn}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const MetaHeaderCell = memo(MetaHeaderCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.tsx"],"names":["header"],"mappings":"AA4DI;AA1DJ,SAAS,6BAA0D;AACnE,SAAS,iCAAiC;AAC1C,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AACpB,SAAS,MAAM,cAAc;AAE7B,SAAS,wBAAwB;AAAA,EAChC;AACD,GAA2C;AAC1C,QAAM,WAAW,OAAe,IAAI,CAAC;AAErC,QAAM,eAAe,0BAA0B,CAAC,cAAc,CAAC;AAC/D,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,UAAU,aACb,eACC,MACA,MACD,eACC,MACA;AAEJ,QAAM,eAAe,OAAO,WAAW;AAAA,IAAK,CAACA,YAC5CA,QAAO,OAAO,aAAa;AAAA,EAC5B,GAAG;AAEH,QAAM,gBAAgB,CAAC,cAAc,YAAY,IAC9C,YACC,aAAc,YAAY;AAC9B,QAAM,eACL,cAAc,oBAAoB,MAAM,QACrC,KAAK,EAAE,oBAAoB,IAC3B,cAAc,oBAAoB,MAAM,SACvC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,OAAM;AAAA,MACN,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBAAiB,CAAC,GAAG,MAAM;AAC1B,cAAM,OAAO,aAAc,wBAAwB;AACnD,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD;AAAA,MACA;AAAA,MACA,SAAS,OAAO,QAAQ,SAAS;AAAA,MACjC;AAAA,MACA,WAAW,OAAO;AAAA,MAEjB,WAAC,CAAC,gBACF;AAAA,QAAC;AAAA;AAAA,UAEA,QAAQ;AAAA;AAAA,QADH,GAAG,OAAO,EAAE;AAAA,MAElB;AAAA;AAAA,IAlBI,GAAG,OAAO,EAAE,IAAI,SAAS,OAAO;AAAA,EAoBtC;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { FilterArea } from \"./FilterArea\";\nimport { uid } from \"@hisptz/dhis2-utils\";\nimport { memo, useRef } from \"react\";\n\nfunction MetaHeaderCellComponent({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst randomId = useRef<string>(uid());\n\n\tconst hasOnePeriod = useScorecardStateSelector([\"hasOnePeriod\"]);\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\tconst filterColumn = header.subHeaders.find((header) =>\n\t\theader.column.getCanFilter(),\n\t)?.column;\n\n\tconst sortDirection = !filterColumn?.getIsSorted()\n\t\t? \"default\"\n\t\t: (filterColumn!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tfilterColumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: filterColumn?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${header.id}-${randomId.current}`}\n\t\t\talign=\"right\"\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={(_, e) => {\n\t\t\t\tconst sort = filterColumn!.getToggleSortingHandler();\n\t\t\t\tif (sort) {\n\t\t\t\t\tsort(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tsortDirection={sortDirection}\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t{!!filterColumn && (\n\t\t\t\t<FilterArea\n\t\t\t\t\tkey={`${header.id}-filter-area`}\n\t\t\t\t\tcolumn={filterColumn}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const MetaHeaderCell = memo(MetaHeaderCellComponent);\n"]}

package/dist/esm/components/Scorecard/components/StateProvider.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { useScorecardConfig } from './ConfigProvider';
 import { getInitialStateFromConfig } from '../utils/state';
+import { get } from 'lodash';
 
 const ScorecardStateContext = createContext(null);
 const ScorecardSetStateContext = createContext(null);
@@ -17,6 +18,12 @@ function useScorecardState() {
   }
   return state;
 }
+function useScorecardStateSelector(path) {
+  const state = useScorecardState();
+  return useMemo(() => {
+    return get(state, path);
+  }, [get(state, path)]);
+}
 function useScorecardSetState() {
   const setState = useContext(ScorecardSetStateContext);
   if (!setState) {
@@ -45,6 +52,6 @@ const ScorecardStateProvider = ({ children, initialState }) => {
   );
 };
 
-export { ScorecardStateProvider, useScorecardSetState, useScorecardState };
+export { ScorecardStateProvider, useScorecardSetState, useScorecardState, useScorecardStateSelector };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=StateProvider.js.map

package/dist/esm/components/Scorecard/components/StateProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Scorecard/components/StateProvider.tsx"],"names":[],"mappings":"AAwDG;AAxDH;AAAA,EACC;AAAA,EAGA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,UAAU;AACjB,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAG1C,MAAM,wBAAwB,cAAqC,IAAI;AACvE,MAAM,2BAA2B,cAAwC,IAAI;AAEtE,SAAS,oBAAoB;AACnC,QAAM,QAAQ,WAAW,qBAAqB;AAC9C,MAAI,CAAC,OAAO;AACX,UAAM;AAAA,MACL,KAAK;AAAA,QACJ;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEO,SAAS,uBAAuB;AACtC,QAAM,WAAW,WAAW,wBAAwB;AACpD,MAAI,CAAC,UAAU;AACd,UAAM;AAAA,MACL,KAAK;AAAA,QACJ;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEO,MAAM,yBAGR,CAAC,EAAE,UAAU,aAAa,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACzB,gBAAgB,0BAA0B,MAAM;AAAA,EACjD;AAEA,SACC;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACA,OAAO;AAAA,QACN,GAAG;AAAA,QACH,cAAc,MAAM,gBAAgB,SAAS,WAAW;AAAA,MACzD;AAAA,MAEA,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,UACxC,UACF;AAAA;AAAA,EACD;AAEF","sourcesContent":["import React, {\n\tcreateContext,\n\ttype Dispatch,\n\ttype SetStateAction,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport type { ScorecardState } from \"../schemas/config\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardConfig } from \"./ConfigProvider\";\nimport { getInitialStateFromConfig } from \"../utils/state\";\n\nexport type ScorecardSetState = Dispatch<SetStateAction<ScorecardState>>;\nconst ScorecardStateContext = createContext<ScorecardState | null>(null);\nconst ScorecardSetStateContext = createContext<ScorecardSetState | null>(null);\n\nexport function useScorecardState() {\n\tconst state = useContext(ScorecardStateContext);\n\tif (!state) {\n\t\tthrow Error(\n\t\t\ti18n.t(\n\t\t\t\t\"useScorecardState should be used inside a Scorecard Context\",\n\t\t\t),\n\t\t);\n\t}\n\treturn state;\n}\n\nexport function useScorecardSetState() {\n\tconst setState = useContext(ScorecardSetStateContext);\n\tif (!setState) {\n\t\tthrow Error(\n\t\t\ti18n.t(\n\t\t\t\t\"useScorecardSetState should be used inside a Scorecard Context\",\n\t\t\t),\n\t\t);\n\t}\n\treturn setState;\n}\n\nexport const ScorecardStateProvider: React.FC<{\n\tchildren: React.ReactNode;\n\tinitialState?: ScorecardState;\n}> = ({ children, initialState }) => {\n\tconst config = useScorecardConfig();\n\tconst [state, setState] = useState<ScorecardState>(\n\t\tinitialState ?? getInitialStateFromConfig(config),\n\t);\n\n\treturn (\n\t\t<ScorecardStateContext.Provider\n\t\t\tvalue={{\n\t\t\t\t...state,\n\t\t\t\thasOnePeriod: state.periodSelection.periods?.length === 1,\n\t\t\t}}\n\t\t>\n\t\t\t<ScorecardSetStateContext.Provider value={setState}>\n\t\t\t\t{children}\n\t\t\t</ScorecardSetStateContext.Provider>\n\t\t</ScorecardStateContext.Provider>\n\t);\n};\n"]}
+{"version":3,"sources":["../../../../../src/components/Scorecard/components/StateProvider.tsx"],"names":[],"mappings":"AAiEG;AAjEH;AAAA,EACC;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,UAAU;AACjB,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,WAAW;AAGpB,MAAM,wBAAwB,cAAqC,IAAI;AACvE,MAAM,2BAA2B,cAAwC,IAAI;AAEtE,SAAS,oBAAoB;AACnC,QAAM,QAAQ,WAAW,qBAAqB;AAC9C,MAAI,CAAC,OAAO;AACX,UAAM;AAAA,MACL,KAAK;AAAA,QACJ;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEO,SAAS,0BAAiC,MAAyB;AACzE,QAAM,QAAQ,kBAAkB;AAChC,SAAO,QAAQ,MAAM;AACpB,WAAO,IAAI,OAAO,IAAI;AAAA,EACvB,GAAG,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC;AACtB;AAEO,SAAS,uBAAuB;AACtC,QAAM,WAAW,WAAW,wBAAwB;AACpD,MAAI,CAAC,UAAU;AACd,UAAM;AAAA,MACL,KAAK;AAAA,QACJ;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEO,MAAM,yBAGR,CAAC,EAAE,UAAU,aAAa,MAAM;AACpC,QAAM,SAAS,mBAAmB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACzB,gBAAgB,0BAA0B,MAAM;AAAA,EACjD;AAEA,SACC;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACA,OAAO;AAAA,QACN,GAAG;AAAA,QACH,cAAc,MAAM,gBAAgB,SAAS,WAAW;AAAA,MACzD;AAAA,MAEA,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,UACxC,UACF;AAAA;AAAA,EACD;AAEF","sourcesContent":["import React, {\n\tcreateContext,\n\ttype Dispatch,\n\ttype SetStateAction,\n\tuseContext,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport type { ScorecardState } from \"../schemas/config\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardConfig } from \"./ConfigProvider\";\nimport { getInitialStateFromConfig } from \"../utils/state\";\nimport { get } from \"lodash\";\n\nexport type ScorecardSetState = Dispatch<SetStateAction<ScorecardState>>;\nconst ScorecardStateContext = createContext<ScorecardState | null>(null);\nconst ScorecardSetStateContext = createContext<ScorecardSetState | null>(null);\n\nexport function useScorecardState() {\n\tconst state = useContext(ScorecardStateContext);\n\tif (!state) {\n\t\tthrow Error(\n\t\t\ti18n.t(\n\t\t\t\t\"useScorecardState should be used inside a Scorecard Context\",\n\t\t\t),\n\t\t);\n\t}\n\treturn state;\n}\n\nexport function useScorecardStateSelector<Value>(path: string | string[]) {\n\tconst state = useScorecardState();\n\treturn useMemo(() => {\n\t\treturn get(state, path) as Value;\n\t}, [get(state, path)]);\n}\n\nexport function useScorecardSetState() {\n\tconst setState = useContext(ScorecardSetStateContext);\n\tif (!setState) {\n\t\tthrow Error(\n\t\t\ti18n.t(\n\t\t\t\t\"useScorecardSetState should be used inside a Scorecard Context\",\n\t\t\t),\n\t\t);\n\t}\n\treturn setState;\n}\n\nexport const ScorecardStateProvider: React.FC<{\n\tchildren: React.ReactNode;\n\tinitialState?: ScorecardState;\n}> = ({ children, initialState }) => {\n\tconst config = useScorecardConfig();\n\tconst [state, setState] = useState<ScorecardState>(\n\t\tinitialState ?? getInitialStateFromConfig(config),\n\t);\n\n\treturn (\n\t\t<ScorecardStateContext.Provider\n\t\t\tvalue={{\n\t\t\t\t...state,\n\t\t\t\thasOnePeriod: state.periodSelection.periods?.length === 1,\n\t\t\t}}\n\t\t>\n\t\t\t<ScorecardSetStateContext.Provider value={setState}>\n\t\t\t\t{children}\n\t\t\t</ScorecardSetStateContext.Provider>\n\t\t</ScorecardStateContext.Provider>\n\t);\n};\n"]}

package/dist/esm/components/Scorecard/hooks/cellData.js

@@ -1,5 +1,4 @@
-import { useScorecardConfig } from '../components/ConfigProvider';
-import { useScorecardMeta } from '../components/MetaProvider';
+import { useScorecardConfig, useScorecardMeta } from '../components';
 import { useMemo } from 'react';
 import { getLegend } from '../utils/legends';
 

package/dist/esm/components/Scorecard/hooks/cellData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Scorecard/hooks/cellData.ts"],"names":[],"mappings":"AACA,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAGnB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,SAAS,mBAAmB;AAClC,QAAM,OAAO,iBAAiB;AAE9B,QAAM,eAAe,YAAY,KAAK;AAEtC,QAAM,mBAAmB,QAAQ,MAAM;AACtC,QAAI,CAAC;AAAY;AACjB,WAAO,UAAU;AAAA,MAChB;AAAA,MACA,OAAO;AAAA,MACP,eAAe,KAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACX,CAAC;AAAA,EACF,GAAG,CAAC,YAAY,cAAc,MAAM,SAAS,MAAM,CAAC;AAEpD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type { ScorecardTableCellData } from \"../schemas/config\";\nimport { useScorecardConfig } from \"../components/ConfigProvider\";\nimport { useScorecardMeta } from \"../components/MetaProvider\";\nimport { useMemo } from \"react\";\nimport { getLegend } from \"../utils/legends\";\nimport type { ItemMeta } from \"./metadata\";\n\nexport function useCellData({\n\tdataSource,\n\torgUnit,\n\tperiod,\n}: {\n\tdataSource?: ScorecardTableCellData[\"dataSources\"][number];\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}) {\n\tconst config = useScorecardConfig();\n\tconst meta = useScorecardMeta();\n\n\tconst currentValue = dataSource?.data.current;\n\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) return;\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tvalue: currentValue,\n\t\t\torgUnitLevels: meta!.orgUnitLevels,\n\t\t\tconfig: config!,\n\t\t\torgUnit,\n\t\t\tperiodId: period,\n\t\t});\n\t}, [dataSource, currentValue, meta, orgUnit, period]);\n\n\treturn {\n\t\tcurrentValue,\n\t\tlegendDefinition,\n\t};\n}\n"]}
+{"version":3,"sources":["../../../../../src/components/Scorecard/hooks/cellData.ts"],"names":[],"mappings":"AAIA,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAGnB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,SAAS,mBAAmB;AAClC,QAAM,OAAO,iBAAiB;AAE9B,QAAM,eAAe,YAAY,KAAK;AAEtC,QAAM,mBAAmB,QAAQ,MAAM;AACtC,QAAI,CAAC;AAAY;AACjB,WAAO,UAAU;AAAA,MAChB;AAAA,MACA,OAAO;AAAA,MACP,eAAe,KAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACX,CAAC;AAAA,EACF,GAAG,CAAC,YAAY,cAAc,MAAM,SAAS,MAAM,CAAC;AAEpD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD","sourcesContent":["import type {\n\tScorecardCellData,\n\tScorecardTableCellConfig,\n} from \"../schemas/config\";\nimport { useScorecardConfig } from \"../components\";\nimport { useScorecardMeta } from \"../components\";\nimport { useMemo } from \"react\";\nimport { getLegend } from \"../utils/legends\";\nimport type { ItemMeta } from \"./metadata\";\n\nexport function useCellData({\n\tdataSource,\n\torgUnit,\n\tperiod,\n}: {\n\tdataSource?: ScorecardCellData;\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}) {\n\tconst config = useScorecardConfig();\n\tconst meta = useScorecardMeta();\n\n\tconst currentValue = dataSource?.data.current;\n\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) return;\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tvalue: currentValue,\n\t\t\torgUnitLevels: meta!.orgUnitLevels,\n\t\t\tconfig: config!,\n\t\t\torgUnit,\n\t\t\tperiodId: period,\n\t\t});\n\t}, [dataSource, currentValue, meta, orgUnit, period]);\n\n\treturn {\n\t\tcurrentValue,\n\t\tlegendDefinition,\n\t};\n}\n"]}

package/dist/esm/components/Scorecard/hooks/columns.js

@@ -1,5 +1,5 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import { useScorecardState, useScorecardConfig, useScorecardMeta } from '../components';
+import { useScorecardStateSelector, useScorecardConfig, useScorecardMeta } from '../components';
 import { useMemo } from 'react';
 import { getOrgUnitColumnHeaders, getDataColumnHeaders, getAverageColumn } from '../utils/columns';
 import { LabelCell } from '../components/ScorecardTable/components/TableHeader/components/LabelCell';
@@ -10,99 +10,118 @@ import { useCalendar } from './metadata';
 import { MetaFooterCell } from '../components/ScorecardTable/components/MetaFooterCell';
 import { getOrgUnitLevel } from '../utils/orgUnits';
 import { useLowestOrgUnitLevel } from './orgUnit';
+import { useScorecardData } from '../components/DataProvider';
 
 const columnHelper = createColumnHelper();
 function useMetaColumns() {
-  const state = useScorecardState();
+  const showDataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
+  const disableExpanding = useScorecardStateSelector([
+    "options",
+    "disableExpanding"
+  ]);
   const lowestLevel = useLowestOrgUnitLevel();
-  const metaColumns = [
-    columnHelper.accessor(
-      (rowData) => {
-        if (state?.options?.disableExpanding) {
-          return false;
-        }
-        const dataInRows = state?.options?.showDataInRows;
-        if (dataInRows) {
-          return false;
-        }
-        if (!lowestLevel) {
-          return false;
-        }
-        const orgUnit = rowData.orgUnit;
-        if (!orgUnit) {
-          return false;
-        }
-        const ouLevel = getOrgUnitLevel(orgUnit);
-        return ouLevel !== lowestLevel.level;
-      },
-      {
-        id: "expand",
-        header: () => null,
-        meta: {
-          isMeta: true,
-          fixed: true,
-          label: ""
-        },
-        enableColumnFilter: false,
-        cell: ExpandCell,
-        footer: () => null
-      }
-    ),
-    columnHelper.accessor(
-      (_, index) => {
-        return index + 1;
-      },
-      {
-        id: "count",
-        header: () => null,
-        meta: {
-          isMeta: true,
-          fixed: true,
-          label: ""
-        },
-        enableColumnFilter: false,
-        cell: NumberCell,
-        footer: () => null
-      }
-    )
-  ];
-  if (state?.options?.showDataInRows) {
-    metaColumns.push(
-      columnHelper.accessor("label", {
-        header: () => null,
-        id: "dataItems",
-        meta: {
-          filterable: true
+  return useMemo(() => {
+    const metaColumns = [
+      columnHelper.accessor(
+        (rowData) => {
+          if (disableExpanding) {
+            return false;
+          }
+          if (showDataInRows) {
+            return false;
+          }
+          if (!lowestLevel) {
+            return false;
+          }
+          const orgUnit = rowData.orgUnit;
+          if (!orgUnit) {
+            return false;
+          }
+          const ouLevel = getOrgUnitLevel(orgUnit);
+          return ouLevel !== lowestLevel.level;
         },
-        enableColumnFilter: true,
-        cell: LabelCell,
-        footer: MetaFooterCell
-      })
-    );
-  } else {
-    metaColumns.push(
-      columnHelper.accessor("label", {
-        header: () => null,
-        id: "orgUnits",
-        enableColumnFilter: true,
-        meta: {
-          isMeta: true,
-          fixed: true
+        {
+          id: "expand",
+          header: () => null,
+          meta: {
+            isMeta: true,
+            fixed: true,
+            label: ""
+          },
+          enableColumnFilter: false,
+          cell: ExpandCell,
+          footer: () => null
+        }
+      ),
+      columnHelper.accessor(
+        (_, index) => {
+          return index + 1;
         },
-        cell: LabelCell,
-        footer: MetaFooterCell
-      })
-    );
-  }
-  return metaColumns;
+        {
+          id: "count",
+          header: () => null,
+          meta: {
+            isMeta: true,
+            fixed: true,
+            label: ""
+          },
+          enableColumnFilter: false,
+          cell: NumberCell,
+          footer: () => null
+        }
+      )
+    ];
+    if (showDataInRows) {
+      metaColumns.push(
+        columnHelper.accessor("label", {
+          header: () => null,
+          id: "dataItems",
+          meta: {
+            filterable: true
+          },
+          enableColumnFilter: true,
+          cell: LabelCell,
+          footer: MetaFooterCell
+        })
+      );
+    } else {
+      metaColumns.push(
+        columnHelper.accessor("label", {
+          header: () => null,
+          id: "orgUnits",
+          enableColumnFilter: true,
+          meta: {
+            isMeta: true,
+            fixed: true
+          },
+          cell: LabelCell,
+          footer: MetaFooterCell
+        })
+      );
+    }
+    return metaColumns;
+  }, [showDataInRows, disableExpanding]);
 }
 function useTableColumns() {
   const config = useScorecardConfig();
+  const { data: dataEngine } = useScorecardData();
   const meta = useScorecardMeta();
-  const state = useScorecardState();
   const metaColumns = useMetaColumns();
   const calendar = useCalendar();
-  if (!config || !meta || !state) {
+  const showDataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
+  const periodSelection = useScorecardStateSelector(
+    "periodSelection"
+  );
+  const orgUnitSelection = useScorecardStateSelector(
+    "orgUnitSelection"
+  );
+  if (!config || !meta) {
     return [];
   }
   return useMemo(() => {
@@ -114,11 +133,12 @@ function useTableColumns() {
         footer: () => null
       })
     ];
-    if (state.options.showDataInRows) {
+    if (showDataInRows) {
       columns.push(
         ...getOrgUnitColumnHeaders({
           meta,
-          calendar
+          calendar,
+          dataEngine
         })
       );
     } else {
@@ -126,7 +146,8 @@ function useTableColumns() {
         ...getDataColumnHeaders({
           meta,
           config,
-          calendar
+          calendar,
+          dataEngine
         })
       );
     }
@@ -137,11 +158,7 @@ function useTableColumns() {
       })
     );
     return columns;
-  }, [
-    state.options.showDataInRows,
-    state.periodSelection,
-    state.orgUnitSelection
-  ]);
+  }, [showDataInRows, periodSelection, orgUnitSelection]);
 }
 
 export { useMetaColumns, useTableColumns };