@datawheel/data-explorer 0.2.9 → 0.2.10

package/dist/main.js

@@ -1265,6 +1265,10 @@ var queriesSlice = createSlice({
       query.params.sortDir = payload.dir;
       query.params.sortKey = payload.key;
     },
+    clearSorting(state) {
+      const query = taintCurrentQuery(state);
+      query.params.sortKey = void 0;
+    },
     /**
      * Registers the result of the current QueryItem in the store.
      */
@@ -1334,7 +1338,7 @@ var selectPaginationParams = createSelector(selectCurrentQueryParams, (params) =
   limit: params.pagiLimit || 0,
   offset: params.pagiOffset || 0
 }));
-createSelector(selectCurrentQueryParams, (params) => ({
+var selectSortingParams = createSelector(selectCurrentQueryParams, (params) => ({
   sortKey: params.sortKey || "",
   sortDir: params.sortDir
 }));
@@ -2797,6 +2801,9 @@ function FullScreenSVG() {
 }
 
 // src/components/TableView.tsx
+function isColumnSorted(column, key) {
+  return column == key;
+}
 var removeColumn = (actions2, entity, measures, drilldowns) => {
   if ("aggregator" in entity) {
     const measure = measures.find((d) => d.name === entity.name);
@@ -3026,6 +3033,7 @@ function useTable({
   const { currentFormats, getAvailableKeys, getFormatter, getFormatterKey, setFormat } = useFormatter(
     cube.measures
   );
+  const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const columns = useMemo(() => {
     const indexColumn = {
       id: "#",
@@ -3066,15 +3074,26 @@ function useTable({
           return 0;
         },
         Header: ({ column: column2 }) => {
+          const isSorted = isColumnSorted(entity.name, sortKey);
           return /* @__PURE__ */ React13__default.createElement(Box, { mb: rem(5), key: "header" }, /* @__PURE__ */ React13__default.createElement(Flex, { justify: "center", align: "center" }, /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React13__default.createElement(Flex, { gap: "xs", align: "center" }, getActionIcon(entityType), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, header), /* @__PURE__ */ React13__default.createElement(
             ActionIcon,
             {
               key: `sort-${header}`,
               size: 22,
               ml: rem(5),
-              onClick: column2.getToggleSortingHandler()
+              onClick: () => {
+                if (!isSorted) {
+                  actions2.updateSorting({ key: entity.name, dir: "desc" });
+                }
+                if (isSorted && sortDir === "desc") {
+                  actions2.updateSorting({ key: entity.name, dir: "asc" });
+                }
+                if (isSorted && sortDir === "asc") {
+                  actions2.clearSorting();
+                }
+              }
             },
-            getSortIcon(column2.getIsSorted(), entityType)
+            getSortIcon(isSorted ? sortDir : false, entityType)
           ))), /* @__PURE__ */ React13__default.createElement(
             CustomActionIcon_default,
             {
@@ -3197,7 +3216,7 @@ function useTable({
     enableHiding: false,
     manualFiltering: true,
     manualPagination: true,
-    manualSorting: false,
+    manualSorting: true,
     rowCount: totalRowCount,
     state: {
       isLoading: isLoading || data === void 0 || isTransitionState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "exports": {
     ".": {
       "import": "./dist/main.js"