@teselagen/ui 0.8.6-beta.2 → 0.8.6-beta.20

package/index.d.ts

@@ -33,6 +33,7 @@ export { default as IntentText } from './IntentText';
 export { default as popoverOverflowModifiers } from './utils/popoverOverflowModifiers';
 export { default as tgFormValues } from './utils/tgFormValues';
 export { default as withStore } from './utils/withStore';
+export { default as determineBlackOrWhiteTextColor } from './utils/determineBlackOrWhiteTextColor';
 export { default as InfoHelper } from './InfoHelper';
 export { default as showConfirmationDialog } from './showConfirmationDialog';
 export { default as showAppSpinner } from './showAppSpinner';

package/index.es.js

@@ -7999,6 +7999,16 @@ function forEach(collection, iteratee) {
   return func(collection, castFunction(iteratee));
 }
 __name(forEach, "forEach");
+function endsWith$1(string2, target, position2) {
+  string2 = toString$4(string2);
+  target = baseToString$1(target);
+  var length = string2.length;
+  position2 = position2 === void 0 ? length : baseClamp(toInteger(position2), 0, length);
+  var end2 = position2;
+  position2 -= target.length;
+  return position2 >= 0 && string2.slice(position2, end2) == target;
+}
+__name(endsWith$1, "endsWith$1");
 function arrayEvery(array2, predicate) {
   var index2 = -1, length = array2 == null ? 0 : array2.length;
   while (++index2 < length) {
@@ -19397,37 +19407,43 @@ function tableQueryParamsToHasuraClauses({
 }) {
   const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
-  const order_by = {};
+  const order_by = [];
   const limit = pageSize || 25;
   const offset3 = page && pageSize ? (page - 1) * pageSize : 0;
   if (searchTerm) {
     const searchTermFilters = [];
+    const uniqueFieldsByPath = {};
+    const searchTerms = searchTerm.split(",");
     schema.fields.forEach((field) => {
       const { type: type2, path: path2, searchDisabled } = field;
+      if (uniqueFieldsByPath[path2]) return;
+      uniqueFieldsByPath[path2] = true;
       if (searchDisabled || field.filterDisabled || type2 === "color") return;
-      const filterValue = searchTerm;
-      if (type2 === "string" || type2 === "lookup") {
-        const o2 = set$1({}, path2, { _ilike: `%${filterValue}%` });
-        searchTermFilters.push(o2);
-      } else if (type2 === "boolean") {
-        let regex;
-        try {
-          regex = new RegExp("^" + searchTerm, "ig");
-        } catch (error) {
-        }
-        if (regex) {
-          if ("true".replace(regex, "") !== "true") {
-            const o2 = set$1({}, path2, { _eq: true });
-            searchTermFilters.push(o2);
-          } else if ("false".replace(regex, "") !== "false") {
-            const o2 = set$1({}, path2, { _eq: false });
-            searchTermFilters.push(o2);
+      searchTerms.forEach((term) => {
+        const filterValue = term.trim();
+        if (type2 === "string" || type2 === "lookup") {
+          const o2 = set$1({}, path2, { _ilike: `%${filterValue}%` });
+          searchTermFilters.push(o2);
+        } else if (type2 === "boolean") {
+          let regex;
+          try {
+            regex = new RegExp("^" + filterValue, "ig");
+          } catch (error) {
+          }
+          if (regex) {
+            if ("true".replace(regex, "") !== "true") {
+              const o2 = set$1({}, path2, { _eq: true });
+              searchTermFilters.push(o2);
+            } else if ("false".replace(regex, "") !== "false") {
+              const o2 = set$1({}, path2, { _eq: false });
+              searchTermFilters.push(o2);
+            }
           }
+        } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
+          const o2 = set$1({}, path2, { _eq: parseFloat(filterValue) });
+          searchTermFilters.push(o2);
         }
-      } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
-        const o2 = set$1({}, path2, { _eq: parseFloat(filterValue) });
-        searchTermFilters.push(o2);
-      }
+      });
     });
     if (searchTermFilters.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -19441,7 +19457,10 @@ function tableQueryParamsToHasuraClauses({
     const filterClauses = filters.map((filter2) => {
       let { selectedFilter, filterOn, filterValue } = filter2;
       const fieldSchema = ccFields[filterOn] || {};
-      const { path: path2, reference: reference2, type: type2 } = fieldSchema;
+      const { path: path2, reference: reference2, type: type2, customColumnFilter } = fieldSchema;
+      if (customColumnFilter) {
+        return customColumnFilter(filterValue);
+      }
       let stringFilterValue = filterValue && filterValue.toString ? filterValue.toString() : filterValue;
       if (stringFilterValue === false) {
         stringFilterValue = "false";
@@ -19474,10 +19493,17 @@ function tableQueryParamsToHasuraClauses({
         case "contains":
           return { [filterOn]: { _ilike: `%${filterValue}%` } };
         case "notContains":
-          return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+          return { [filterOn]: { _nilike: `%${filterValue}%` } };
         case "isExactly":
           return { [filterOn]: { _eq: filterValue } };
         case "isEmpty":
+          if (filterOn.includes(".")) {
+            return {
+              _not: {
+                [filterOn.split(".")[0]]: {}
+              }
+            };
+          }
           return {
             _or: [
               { [filterOn]: { _eq: "" } },
@@ -19511,9 +19537,7 @@ function tableQueryParamsToHasuraClauses({
               },
               {
                 [filterOn]: {
-                  _gt: new Date(
-                    new Date(arrayFilterValue[1]).setHours(23, 59)
-                  )
+                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
                 }
               }
             ]
@@ -19567,10 +19591,6 @@ function tableQueryParamsToHasuraClauses({
           console.warn(`Unsupported filter type: ${selectedFilter}`);
           return {};
       }
-    }).map((filter2) => {
-      const o2 = {};
-      set$1(o2, Object.keys(filter2)[0], filter2[Object.keys(filter2)[0]]);
-      return o2;
     });
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -19584,7 +19604,7 @@ function tableQueryParamsToHasuraClauses({
     order2.forEach((item) => {
       const field = item.startsWith("-") ? item.substring(1) : item;
       const direction = item.startsWith("-") ? "desc" : "asc";
-      order_by[field] = direction;
+      order_by.push({ [field]: direction });
     });
   }
   if (additionalFilter) {
@@ -19616,6 +19636,7 @@ function filterLocalEntitiesToHasura(records, { where, order_by, limit, offset:
   if (order_by) {
     filteredRecords = applyOrderBy(filteredRecords, order_by);
   }
+  filteredRecords = restoreEntitiesFromLocalFilter(filteredRecords);
   const allFilteredRecords = [...filteredRecords];
   if (!isInfinite && offset3 !== void 0) {
     filteredRecords = filteredRecords.slice(offset3);
@@ -19655,7 +19676,7 @@ function applyWhereClause(records, where) {
           return false;
         }
       } else {
-        const value = record[key];
+        const value = get$3(record, key);
         const conditions = filter2[key];
         if (isObject$2(value) && isObject$2(conditions) && !hasOperator(conditions)) {
           return applyFilter(value, conditions);
@@ -19764,35 +19785,110 @@ function applyWhereClause(records, where) {
   return records.filter((record) => applyFilter(record, where));
 }
 __name(applyWhereClause, "applyWhereClause");
-function applyOrderBy(records, order_by) {
-  const keys2 = Object.keys(order_by);
-  if (keys2.length > 0) {
-    const field = keys2[0];
-    const direction = order_by[field] === "asc" ? "asc" : "desc";
-    return orderBy$1(records, [field], [direction]);
+function applyOrderBy(records, _order_by) {
+  const order_by = isArray$2(_order_by) ? _order_by : isEmpty$1(_order_by) ? [] : [_order_by];
+  if (order_by.length > 0) {
+    const orderFuncs = [];
+    const ascOrDescArray = [];
+    order_by.forEach(
+      ({ path: path2, direction, type: type2, sortFn, getValueToFilterOn, ownProps }) => {
+        direction = direction || "desc";
+        if (sortFn) {
+          const sortFnArray = Array.isArray(sortFn) ? sortFn : [sortFn];
+          sortFnArray.forEach((fn4) => {
+            orderFuncs.push((r2) => {
+              const val = fn4(r2);
+              return val !== null && val !== void 0 ? 1 : 0;
+            });
+            ascOrDescArray.push("desc");
+            orderFuncs.push(fn4);
+            ascOrDescArray.push(direction);
+          });
+        } else if (getValueToFilterOn) {
+          orderFuncs.push((r2) => {
+            const val = getValueToFilterOn(r2, ownProps);
+            return val !== null && val !== void 0 ? 1 : 0;
+          });
+          ascOrDescArray.push("desc");
+          orderFuncs.push((r2) => getValueToFilterOn(r2, ownProps));
+          ascOrDescArray.push(direction);
+        } else if (type2 === "timestamp") {
+          orderFuncs.push((r2) => {
+            const val = get$3(r2, path2);
+            return val ? 1 : 0;
+          });
+          ascOrDescArray.push("desc");
+          orderFuncs.push((r2) => {
+            const val = get$3(r2, path2);
+            return val ? new Date(val).getTime() : -Infinity;
+          });
+          ascOrDescArray.push(direction);
+        } else if (path2 && endsWith$1(path2.toLowerCase(), "id")) {
+          orderFuncs.push((r2) => {
+            const val = get$3(r2, path2);
+            return val !== null && val !== void 0 ? 1 : 0;
+          });
+          ascOrDescArray.push("desc");
+          orderFuncs.push((o2) => {
+            const val = get$3(o2, path2);
+            if (val === null || val === void 0) return -Infinity;
+            return parseInt(val, 10) || 0;
+          });
+          ascOrDescArray.push(direction);
+        } else {
+          orderFuncs.push((r2) => {
+            const val = get$3(r2, path2);
+            return val !== null && val !== void 0 ? 1 : 0;
+          });
+          ascOrDescArray.push("desc");
+          orderFuncs.push((r2) => {
+            const val = get$3(r2, path2);
+            if (val === null || val === void 0) return -Infinity;
+            if (isString$1(val)) {
+              return val.toLowerCase().replace(
+                /(\d+)/g,
+                (num) => (
+                  // Pad numbers with leading zeros for proper natural sort
+                  num.padStart(10, "0")
+                )
+              );
+            }
+            return val;
+          });
+          ascOrDescArray.push(direction);
+        }
+      }
+    );
+    records = orderBy$1(records, orderFuncs, ascOrDescArray);
   }
   return records;
 }
 __name(applyOrderBy, "applyOrderBy");
+function restoreEntitiesFromLocalFilter(ents) {
+  return ents.map((entity) => {
+    forEach(entity, (val, key) => {
+      var _a;
+      if ((_a = key.startsWith) == null ? void 0 : _a.call(key, "___original___")) {
+        entity[key.slice("___original___".length)] = val;
+        delete entity[key];
+      }
+    });
+    return entity;
+  });
+}
+__name(restoreEntitiesFromLocalFilter, "restoreEntitiesFromLocalFilter");
 function initializeHasuraWhereAndFilter(additionalFilter, where = {}, currentParams) {
   where._and = where._and || [];
   where._or = where._or || [];
   if (typeof additionalFilter === "function") {
     const newWhere = additionalFilter(where, currentParams);
     if (newWhere) {
-      where = __spreadValues(__spreadValues({}, where), newWhere);
+      Object.assign(where, newWhere);
     }
   } else if (typeof additionalFilter === "object")
     where._and.push(additionalFilter);
 }
 __name(initializeHasuraWhereAndFilter, "initializeHasuraWhereAndFilter");
-const addCustomColumnFilters = /* @__PURE__ */ __name((where, fields, currentParams) => {
-  fields.forEach((field) => {
-    const { customColumnFilter, filterDisabled } = field;
-    if (filterDisabled || !customColumnFilter) return;
-    customColumnFilter(where, currentParams);
-  });
-}, "addCustomColumnFilters");
 const defaultPageSizes = [5, 10, 15, 25, 50, 100, 200, 400];
 function safeStringify(val) {
   if (val !== null && typeof val === "object") {
@@ -19967,9 +20063,22 @@ function makeDataTableHandlers({
   };
 }
 __name(makeDataTableHandlers, "makeDataTableHandlers");
+function cleanupFilters({ filters, ccFields }) {
+  (filters || []).forEach((filter2) => {
+    const { filterOn, filterValue } = filter2;
+    const field = ccFields[filterOn];
+    if (field.type === "number" || field.type === "integer") {
+      filter2.filterValue = Array.isArray(filterValue) ? filterValue.map((val) => Number(val)) : Number(filterValue);
+    }
+    if (filter2.selectedFilter === "inList" && typeof filter2.filterValue === "number") {
+      filter2.filterValue = filter2.filterValue.toString();
+    }
+  });
+}
+__name(cleanupFilters, "cleanupFilters");
 function getQueryParams({
   currentParams,
-  // urlConnected,
+  urlConnected,
   defaults,
   schema,
   isInfinite,
@@ -19978,88 +20087,145 @@ function getQueryParams({
   additionalFilter,
   doNotCoercePageSize,
   noOrderError,
-  // isCodeModel,
+  isCodeModel,
   ownProps
 }) {
-  Object.keys(currentParams).forEach(function(key) {
-    if (currentParams[key] === void 0) {
-      delete currentParams[key];
-    }
-  });
-  const tableQueryParams = __spreadValues(__spreadValues({}, defaults), currentParams);
-  let { page, pageSize, searchTerm, filters, order: order2 } = tableQueryParams;
-  if (page <= 0 || isNaN(page)) {
-    page = void 0;
-  }
-  if (isInfinite) {
-    page = void 0;
-    pageSize = void 0;
-  }
-  if (pageSize !== void 0 && !doNotCoercePageSize) {
-    const closest = clone$1(window.tgPageSizes || defaultPageSizes).sort(
-      (a2, b2) => Math.abs(pageSize - a2) - Math.abs(pageSize - b2)
-    )[0];
-    pageSize = closest;
-  }
-  const cleanedOrder = [];
-  if (order2 && order2.length) {
-    const ccFields = getFieldsMappedByCCDisplayName(schema);
-    order2.forEach((orderVal) => {
-      const ccDisplayName = orderVal.replace(/^-/gi, "");
-      const schemaForField = ccFields[ccDisplayName];
-      if (schemaForField) {
-        const { path: path2 } = schemaForField;
-        const reversed = ccDisplayName !== orderVal;
-        const prefix2 = reversed ? "-" : "";
-        cleanedOrder.push(prefix2 + path2);
-      } else {
-        !noOrderError && console.error(
-          "No schema for field found!",
-          ccDisplayName,
-          JSON.stringify(schema.fields, null, 2)
-        );
+  let errorParsingUrlString;
+  try {
+    Object.keys(currentParams).forEach(function(key) {
+      if (currentParams[key] === void 0) {
+        delete currentParams[key];
       }
     });
-  }
-  let toRet = {
-    //these are values that might be generally useful for the wrapped component
-    page,
-    pageSize: ownProps.controlled_pageSize || pageSize,
-    order: cleanedOrder,
-    filters,
-    searchTerm
-  };
-  const { where, order_by, limit, offset: offset3 } = tableQueryParamsToHasuraClauses({
-    page,
-    pageSize,
-    searchTerm,
-    filters,
-    order: cleanedOrder,
-    schema
-  });
-  initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
-  addCustomColumnFilters(where, schema.fields, currentParams);
-  if (isLocalCall) {
-    toRet = __spreadValues(__spreadValues({}, toRet), filterLocalEntitiesToHasura(entities, {
-      where,
-      order_by,
-      limit,
-      offset: offset3,
-      isInfinite
-    }));
-    return toRet;
-  } else {
-    return __spreadProps(__spreadValues({}, toRet), {
-      variables: {
-        where,
-        order_by,
-        limit,
-        offset: offset3
-      }
+    const tableQueryParams = __spreadValues(__spreadValues({}, defaults), currentParams);
+    let { page, pageSize, searchTerm, filters, order: order2 } = tableQueryParams;
+    const ccFields = getFieldsMappedByCCDisplayName(schema);
+    cleanupFilters({ filters, ccFields });
+    if (page <= 0 || isNaN(page)) {
+      page = void 0;
+    }
+    if (isInfinite) {
+      page = void 0;
+      pageSize = void 0;
+    }
+    if (pageSize !== void 0 && !doNotCoercePageSize) {
+      const closest = clone$1(window.tgPageSizes || defaultPageSizes).sort(
+        (a2, b2) => Math.abs(pageSize - a2) - Math.abs(pageSize - b2)
+      )[0];
+      pageSize = closest;
+    }
+    const cleanedOrder = [];
+    if (order2 && order2.length) {
+      order2.forEach((orderVal) => {
+        const ccDisplayName = orderVal.replace(/^-/gi, "");
+        const schemaForField = ccFields[ccDisplayName];
+        if (schemaForField) {
+          const { path: path2 } = schemaForField;
+          const reversed = ccDisplayName !== orderVal;
+          const prefix2 = reversed ? "-" : "";
+          cleanedOrder.push(prefix2 + path2);
+        } else {
+          !noOrderError && console.error(
+            "No schema for field found!",
+            ccDisplayName,
+            JSON.stringify(schema.fields, null, 2)
+          );
+        }
+      });
+    }
+    let toRet = {
+      //these are values that might be generally useful for the wrapped component
+      page,
+      pageSize: ownProps.controlled_pageSize || pageSize,
+      order: cleanedOrder,
+      filters,
+      searchTerm
+    };
+    const { where, order_by, limit, offset: offset3 } = tableQueryParamsToHasuraClauses({
+      page,
+      pageSize,
+      searchTerm,
+      filters,
+      order: cleanedOrder,
+      schema
     });
+    initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
+    if (isLocalCall) {
+      const newEnts = filterLocalEntitiesToHasura(
+        prepEntitiesForLocalFilter({ entities, ccFields }),
+        {
+          where,
+          order_by: (Array.isArray(order_by) ? order_by : [order_by]).map(
+            (obj) => {
+              const path2 = Object.keys(obj)[0];
+              return __spreadValues({
+                path: path2,
+                direction: obj[path2],
+                ownProps
+              }, ccFields[path2]);
+            }
+          ),
+          limit,
+          offset: offset3,
+          isInfinite
+        }
+      );
+      toRet = __spreadValues(__spreadValues({}, toRet), newEnts);
+      return toRet;
+    } else {
+      if (!order_by.length) {
+        order_by.push({ updatedAt: "desc" });
+      }
+      order_by.push(
+        isCodeModel ? { code: "desc" } : { [window.__sortId || "id"]: "desc" }
+      );
+      return __spreadProps(__spreadValues({}, toRet), {
+        variables: {
+          where,
+          order_by,
+          limit,
+          offset: offset3
+        }
+      });
+    }
+  } catch (e) {
+    if (urlConnected) {
+      errorParsingUrlString = e;
+      console.error(
+        "The following error occurred when trying to build the query params. This is probably due to a malformed URL:",
+        e
+      );
+      return {
+        errorParsingUrlString,
+        variables: {
+          where: {},
+          order_by: [],
+          limit: 0,
+          offset: 0
+        }
+      };
+    } else {
+      console.error("Error building query params from filter:");
+      throw e;
+    }
   }
 }
 __name(getQueryParams, "getQueryParams");
+function prepEntitiesForLocalFilter({ entities, ccFields }) {
+  const r2 = entities.map((entity) => {
+    const newEnt = __spreadValues({}, entity);
+    forEach(ccFields, ({ getValueToFilterOn, path: path2 }) => {
+      if (getValueToFilterOn) {
+        newEnt["___original___" + path2] = newEnt[path2];
+        const value = getValueToFilterOn(newEnt);
+        newEnt[path2] = value;
+      }
+    });
+    return newEnt;
+  });
+  return r2;
+}
+__name(prepEntitiesForLocalFilter, "prepEntitiesForLocalFilter");
 function PagingInput({ disabled, onBlur, defaultPage }) {
   const [page, setPage] = useState(defaultPage);
   const defaultValue2 = useRef(defaultPage);
@@ -31863,7 +32029,15 @@ function requireColor() {
 __name(requireColor, "requireColor");
 var colorExports = requireColor();
 const Color = /* @__PURE__ */ getDefaultExportFromCjs(colorExports);
-const determineBlackOrWhiteTextColor = /* @__PURE__ */ __name((c2) => Color(c2).isLight() ? "#000000" : "#FFFFFF", "determineBlackOrWhiteTextColor");
+function determineBlackOrWhiteTextColor(c2) {
+  try {
+    return Color(c2).isLight() ? "#000000" : "#FFFFFF";
+  } catch (e) {
+    console.error("Error in color parsing:", e);
+    return "#000000";
+  }
+}
+__name(determineBlackOrWhiteTextColor, "determineBlackOrWhiteTextColor");
 function getTagsAndTagOptions(allTags) {
   return flatMap(allTags, (tag) => {
     if (tag.tagOptions && tag.tagOptions.length) {
@@ -51186,7 +51360,7 @@ const RenderColumnHeader = /* @__PURE__ */ __name(({
   if (order2 && order2.length) {
     order2.forEach((order22) => {
       const orderField = order22.replace("-", "");
-      if (orderField === ccDisplayName) {
+      if (orderField === path2) {
         if (orderField === order22) {
           ordering = "asc";
         } else {
@@ -56277,6 +56451,8 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
         doNotCoercePageSize,
         currentParams,
         entities: props.entities,
+        // for local table
+        urlConnected,
         defaults,
         schema: convertedSchema,
         isInfinite,
@@ -58669,7 +58845,7 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
                 try {
                   const allEntities = yield safeQuery(fragment, {
                     variables: {
-                      filter: variables.filter,
+                      where: variables.where,
                       sort: variables.sort
                     },
                     canCancel: true
@@ -69049,6 +69225,7 @@ function parseCsvOrExcelFile(_0) {
 }
 __name(parseCsvOrExcelFile, "parseCsvOrExcelFile");
 const filterFilesInZip = /* @__PURE__ */ __name((file, accepted) => __async(void 0, null, function* () {
+  var _a, _b, _c, _d;
   if (!file || Array.isArray(file) && !file.length) return [];
   const zipExtracted = yield extractZipFiles(file);
   const acceptedFiles = [];
@@ -69058,9 +69235,12 @@ const filterFilesInZip = /* @__PURE__ */ __name((file, accepted) => __async(void
     }
   }
   if (acceptedFiles.length && acceptedFiles.length < zipExtracted.length)
-    window.toastr.warning("Some files don't have the proper file extension.");
+    (_b = (_a = window == null ? void 0 : window.toastr) == null ? void 0 : _a.warning) == null ? void 0 : _b.call(
+      _a,
+      "Some files don't have the proper file extension."
+    );
   if (!acceptedFiles.length)
-    window.toastr.warning("No files with the proper extension were found.");
+    (_d = (_c = window == null ? void 0 : window.toastr) == null ? void 0 : _c.warning) == null ? void 0 : _d.call(_c, "No files with the proper extension were found.");
   return acceptedFiles;
 }), "filterFilesInZip");
 function removeExt(filename) {
@@ -71788,12 +71968,15 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
       doNotCoercePageSize,
       currentParams,
       entities,
+      // for local table
+      urlConnected,
       defaults: defaultsToUse,
       schema: convertedSchema,
       isInfinite: isInfinite || isSimple && !withPaging,
       isLocalCall,
       additionalFilter,
       noOrderError,
+      isCodeModel,
       ownProps: passingProps
     });
   }, [
@@ -77953,6 +78136,7 @@ export {
   createDynamicMenu,
   createMenu,
   designIcon,
+  determineBlackOrWhiteTextColor,
   dnaIcon,
   doesSearchValMatchText,
   driveIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.2",
+  "version": "0.8.6-beta.20",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/DataTable/Columns.js

@@ -104,7 +104,7 @@ const RenderColumnHeader = ({
   if (order && order.length) {
     order.forEach(order => {
       const orderField = order.replace("-", "");
-      if (orderField === ccDisplayName) {
+      if (orderField === path) {
         if (orderField === order) {
           ordering = "asc";
         } else {

package/src/DataTable/index.js

@@ -92,9 +92,9 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
-  getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
+  getCurrentParamsFromUrl,
   setCurrentParamsOnUrl
 } from "./utils/queryParams";
 import { useColumns } from "./Columns";
@@ -3078,7 +3078,7 @@ const DataTable = ({
                     try {
                       const allEntities = await safeQuery(fragment, {
                         variables: {
-                          filter: variables.filter,
+                          where: variables.where,
                           sort: variables.sort
                         },
                         canCancel: true