@datawheel/data-explorer 1.0.4 → 1.0.6

package/dist/main.d.mts

@@ -467,7 +467,7 @@ interface ViewProps<TData extends Record<string, any> = Record<string, string |
     cube: TesseractCube;
     panelKey: string | null;
     params: QueryParams;
-    result: QueryResult<TData>;
+    result?: QueryResult<TData>;
     table?: MRT_TableInstance<TData & Record<string, any>>;
     isError?: boolean;
     isLoading?: boolean;
@@ -478,7 +478,7 @@ interface ViewProps<TData extends Record<string, any> = Record<string, string |
 }
 
 /** */
-declare function DebugView(props: ViewProps): React.JSX.Element;
+declare function DebugView(props: ViewProps): React.JSX.Element | null;
 
 declare const explorerTranslation: {
     action_copy: string;
@@ -1188,7 +1188,7 @@ declare namespace ExplorerComponent {
 }
 
 /** */
-declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React.JSX.Element;
+declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React.JSX.Element | null;
 
 type TData = Record<string, string | number> & Record<string, any>;
 type TableView = {

package/dist/main.mjs

@@ -1,6 +1,6 @@
 import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Title, useMantineTheme, MantineProvider, Modal, Space, useComponentDefaultProps, Anchor, Paper, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Popover } from '@mantine/core';
 import { useClipboard, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
 import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, Component, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -500,42 +500,19 @@ var { useTranslation, TranslationConsumer, TranslationProvider } = translationFa
 
 // src/components/DebugView.tsx
 function DebugView(props) {
+  if (!props.result) return null;
   const { url } = props.result;
   const { translate: t } = useTranslation();
   const { copy, copied } = useClipboard({ timeout: 1e3 });
   const copyHandler = useCallback(() => copy(url), [url, copy]);
   const openHandler = useCallback(() => window.open(url, "_blank"), [url]);
   const headers = useMemo(() => {
-    const headers2 = Object.entries(props.result.headers || {});
+    var _a;
+    const headers2 = Object.entries(((_a = props.result) == null ? void 0 : _a.headers) || {});
     if (headers2.length === 0) return null;
     return /* @__PURE__ */ React13__default.createElement(Input.Wrapper, { label: t("debug_view.httpheaders") }, /* @__PURE__ */ React13__default.createElement(Box, { component: "dl", sx: { fontFamily: "monospace", overflowWrap: "break-word" } }, headers2.map((entry) => /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, { key: entry[0] }, /* @__PURE__ */ React13__default.createElement(Text, { component: "dt", fw: "bold", fz: "sm" }, entry[0]), /* @__PURE__ */ React13__default.createElement(Text, { component: "dd", c: "#5c940d", fz: "sm" }, entry[1])))));
   }, [props.result.headers, t]);
-  return /* @__PURE__ */ React13__default.createElement(Box, { id: "query-results-debug-view" }, /* @__PURE__ */ React13__default.createElement(Stack, { spacing: "md", px: "md", py: "sm" }, url && /* @__PURE__ */ React13__default.createElement(Input.Wrapper, { label: t("debug_view.url_logiclayer") }, /* @__PURE__ */ React13__default.createElement(Group, { noWrap: true, spacing: "xs" }, /* @__PURE__ */ React13__default.createElement(
-    Input,
-    {
-      icon: /* @__PURE__ */ React13__default.createElement(IconWorld, null),
-      readOnly: true,
-      rightSectionWidth: "auto",
-      value: url,
-      w: "100%"
-    }
-  ), /* @__PURE__ */ React13__default.createElement(Button.Group, null, /* @__PURE__ */ React13__default.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React13__default.createElement(IconExternalLink, null),
-      onClick: openHandler,
-      variant: "default"
-    },
-    t("action_open")
-  ), /* @__PURE__ */ React13__default.createElement(
-    Button,
-    {
-      leftIcon: /* @__PURE__ */ React13__default.createElement(IconClipboard, null),
-      onClick: copyHandler,
-      variant: "default"
-    },
-    copied ? t("action_copy_done") : t("action_copy")
-  )))), /* @__PURE__ */ React13__default.createElement(SimpleGrid, { cols: 2 }, headers)));
+  return /* @__PURE__ */ React13__default.createElement(Box, { id: "query-results-debug-view" }, /* @__PURE__ */ React13__default.createElement(Stack, { spacing: "md", px: "md", py: "sm" }, url && /* @__PURE__ */ React13__default.createElement(Input.Wrapper, { label: t("debug_view.url_logiclayer") }, /* @__PURE__ */ React13__default.createElement(Group, { noWrap: true, spacing: "xs" }, /* @__PURE__ */ React13__default.createElement(Input, { icon: /* @__PURE__ */ React13__default.createElement(IconWorld, null), readOnly: true, rightSectionWidth: "auto", value: url, w: "100%" }), /* @__PURE__ */ React13__default.createElement(Button.Group, null, /* @__PURE__ */ React13__default.createElement(Button, { leftIcon: /* @__PURE__ */ React13__default.createElement(IconExternalLink, null), onClick: openHandler, variant: "default" }, t("action_open")), /* @__PURE__ */ React13__default.createElement(Button, { leftIcon: /* @__PURE__ */ React13__default.createElement(IconClipboard, null), onClick: copyHandler, variant: "default" }, copied ? t("action_copy_done") : t("action_copy"))))), /* @__PURE__ */ React13__default.createElement(SimpleGrid, { cols: 2 }, headers)));
 }
 
 // src/components/Explorer.tsx
@@ -2368,7 +2345,7 @@ function useFetchQuery(queryParams, queryLink, options) {
         if (!response.ok) {
           throw new Error(`Backend Error: ${content.detail}`);
         }
-        const cubeData = await tesseract.fetchCube({ cube: queryParams.cube });
+        const cubeData = await tesseract.fetchCube({ cube: queryParams.cube, locale: queryParams.locale });
         return {
           data: content.data,
           page: content.page,
@@ -2948,10 +2925,8 @@ function useTableRefresh() {
 function useTableData({ pagination }) {
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const queryLink = queryItem.link;
-  useActions();
   const pageSize = pagination.pageSize;
   const pageIndex = pagination.pageIndex;
-  useUpdateUrl();
   const query = useFetchQuery(queryItem.params, queryLink, {
     limit: pageSize,
     offset: pageIndex * pageSize
@@ -3252,6 +3227,7 @@ function useTable({
     ...mantineTableProps
   });
   return {
+    result: data,
     table,
     isError,
     isLoading,
@@ -3419,6 +3395,7 @@ function MultiFilter({ header }) {
   const cutItems = useSelector$1(selectCutItems);
   const drilldownItems = useSelector$1(selectDrilldownItems);
   const label = header.column.id;
+  const localeLabel = header.column.columnDef.header;
   const drilldown = drilldownItems.find((d) => d.level === header.column.id);
   const actions2 = useActions();
   const { idFormatters } = useidFormatters();
@@ -3460,7 +3437,7 @@ function MultiFilter({ header }) {
         newQuery.params.cuts[cut.key] = { ...newCut, members: value };
         debouncedUpdateUrl(newQuery);
       },
-      placeholder: t("params.filter_by", { name: label }),
+      placeholder: t("params.filter_by", { name: localeLabel }),
       value: cut.members || [],
       data: drilldown.members.map((m) => {
         const idFormatter = idFormatters[`${label} ID`];
@@ -4236,7 +4213,8 @@ function ExplorerResults(props) {
       className: cx(classes.container, props.className),
       cube,
       panels: props.panels,
-      params
+      params,
+      panelKey: null
     },
     props.splash
   );
@@ -4256,15 +4234,13 @@ function FailureResult(props) {
 }
 function SuccessResult(props) {
   const updateUrl = useUpdateUrl();
-  const { cube, panels, params, result } = props;
+  const { cube, panels, params } = props;
   const { translate: t } = useTranslation();
   const { previewLimit, actions: actions2 } = useSettings();
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const isPreviewMode = useSelector$1(selectIsPreviewMode);
-  const { table, isError, isLoading, data, columns, pagination, setPagination } = useTable({
-    cube
-  });
   const fullscreen = useFullscreen();
+  const { classes, cx } = useStyles2();
   const [CurrentComponent, panelKey, panelMeta] = useMemo(() => {
     const currentPanel = queryItem.panel || `${panels[0].key}-`;
     const [panelKey2, ...panelMeta2] = currentPanel.split("-");
@@ -4275,6 +4251,20 @@ function SuccessResult(props) {
     actions2.switchPanel(newTab);
     updateUrl({ ...queryItem, panel: newTab });
   };
+  const { table, isError, isLoading, data, columns, result, pagination, setPagination } = useTable({
+    cube
+  });
+  if ((data == null ? void 0 : data.length) === 0 && !isLoading && !isError) {
+    return /* @__PURE__ */ React13__default.createElement(
+      FailureResult,
+      {
+        className: cx(classes.container, props.className),
+        icon: /* @__PURE__ */ React13__default.createElement(IconBox, { color: "orange", size: "5rem" }),
+        title: t("results.error_emptyresult_title"),
+        description: t("results.error_emptyresult_detail")
+      }
+    );
+  }
   return /* @__PURE__ */ React13__default.createElement(
     Flex,
     {
@@ -4305,7 +4295,7 @@ function SuccessResult(props) {
           h: "fit-content"
         },
         /* @__PURE__ */ React13__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
-        (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React13__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, /* @__PURE__ */ React13__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React13__default.createElement(DrawerMenu_default, null))
+        (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React13__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, props.table && /* @__PURE__ */ React13__default.createElement(Toolbar, { table: props.table, fullscreen }), /* @__PURE__ */ React13__default.createElement(DrawerMenu_default, null))
       ),
       isPreviewMode && /* @__PURE__ */ React13__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React13__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React13__default.createElement(Text, null, /* @__PURE__ */ React13__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React13__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React13__default.createElement(PreviewModeSwitch, null))),
       /* @__PURE__ */ React13__default.createElement(
@@ -4320,11 +4310,11 @@ function SuccessResult(props) {
             panelKey: `${panelKey}-${panelMeta}`,
             cube,
             params,
+            data,
             result,
             table,
             isError,
             isLoading,
-            data,
             columns,
             pagination,
             setPagination
@@ -4815,7 +4805,7 @@ function QueryProvider({ children, defaultCube }) {
       const cubeDefault = defaultCube && hasProperty(cubeMap, defaultCube) ? defaultCube : Object.keys(cubeMap)[0];
       setDefaultValues(cubeMap[cubeDefault]);
     }
-  }, [location2.search, runFetchMembers, schema, serverURL]);
+  }, [location2.search, runFetchMembers, schema, serverURL, defaultLocale]);
   const onChangeCube = (table, subtopic) => {
     const locale = defaultLocale || queryItem.params.locale;
     const cubeMap = (schema == null ? void 0 : schema.cubeMap) || {};
@@ -5562,7 +5552,8 @@ var useStyles5 = createStyles((theme) => ({
   }
 }));
 function PivotView(props) {
-  const { cube, params, result, ...mantineReactTableProps } = props;
+  const { cube, params, result, isLoading, ...mantineReactTableProps } = props;
+  if (!result) return null;
   const locale = params.locale;
   const { translate: t } = useTranslation();
   const measureMap = useSelector$1(selectOlapMeasureMap);
@@ -5609,51 +5600,27 @@ function PivotView(props) {
   );
   const [valProp, setValueProp] = useState(() => measureOptions[0]);
   const fileName = [params.cube, colProp.label, rowProp.label, valProp.value].join("_");
-  const [pivottedData, pivottingError] = usePivottedData(result.data, colProp.value, rowProp.value, valProp.value);
-  const {
-    formatter: formatter2,
-    formatterKey,
-    formatterKeyOptions,
-    setFormat
-  } = useFormatParams(props.cube.measures, valProp.value);
+  const [pivottedData, pivottingError] = usePivottedData(
+    result.data,
+    colProp.value,
+    rowProp.value,
+    valProp.value
+  );
+  const { formatter: formatter2, formatterKey, formatterKeyOptions, setFormat } = useFormatParams(
+    props.cube.measures,
+    valProp.value
+  );
   const warnings = useMemo(() => {
     const warnings2 = [];
     if (rowProp.type === "prop" || colProp.type === "prop") {
       warnings2.push(
-        /* @__PURE__ */ React13__default.createElement(
-          Alert,
-          {
-            color: "yellow",
-            m: "sm",
-            icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }),
-            key: "propertypivot"
-          },
-          t("pivot_view.warning_propertypivot")
-        )
+        /* @__PURE__ */ React13__default.createElement(Alert, { color: "yellow", m: "sm", icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }), key: "propertypivot" }, t("pivot_view.warning_propertypivot"))
       );
     }
     const drilldownCount = Object.values(params.drilldowns).filter(isActiveItem).length;
     if (drilldownCount > 2) {
       warnings2.push(
-        valProp.type !== "Sum" /* SUM */ ? /* @__PURE__ */ React13__default.createElement(
-          Alert,
-          {
-            color: "yellow",
-            m: "sm",
-            icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }),
-            key: "notsummeasure"
-          },
-          t("pivot_view.warning_notsummeasure")
-        ) : /* @__PURE__ */ React13__default.createElement(
-          Alert,
-          {
-            color: "yellow",
-            m: "sm",
-            icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }),
-            key: "sumdimensions"
-          },
-          t("pivot_view.warning_sumdimensions")
-        )
+        valProp.type !== "Sum" /* SUM */ ? /* @__PURE__ */ React13__default.createElement(Alert, { color: "yellow", m: "sm", icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }), key: "notsummeasure" }, t("pivot_view.warning_notsummeasure")) : /* @__PURE__ */ React13__default.createElement(Alert, { color: "yellow", m: "sm", icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "2rem" }), key: "sumdimensions" }, t("pivot_view.warning_sumdimensions"))
       );
     }
     return warnings2;
@@ -5738,127 +5705,127 @@ function PivotView(props) {
       }
     );
   }
-  return /* @__PURE__ */ React13__default.createElement(
-    Box,
+  return /* @__PURE__ */ React13__default.createElement(Box, { id: "query-results-pivot-view", className: cx(props.className, classes.container) }, /* @__PURE__ */ React13__default.createElement(Box, { className: classes.colParams }, /* @__PURE__ */ React13__default.createElement(
+    SimpleGrid,
     {
-      id: "query-results-pivot-view",
-      className: cx(props.className, classes.container)
+      id: "query-results-pivot-view-params",
+      px: "md",
+      py: "sm",
+      cols: 1,
+      breakpoints: [
+        { minWidth: "xs", cols: 2 },
+        { minWidth: "sm", cols: 3 },
+        { minWidth: "md", cols: 1 }
+      ]
     },
-    /* @__PURE__ */ React13__default.createElement(Box, { className: classes.colParams }, /* @__PURE__ */ React13__default.createElement(
-      SimpleGrid,
+    /* @__PURE__ */ React13__default.createElement(
+      SelectOption,
       {
-        id: "query-results-pivot-view-params",
-        px: "md",
-        py: "sm",
-        cols: 1,
-        breakpoints: [
-          { minWidth: "xs", cols: 2 },
-          { minWidth: "sm", cols: 3 },
-          { minWidth: "md", cols: 1 }
-        ]
-      },
-      /* @__PURE__ */ React13__default.createElement(
-        SelectOption,
-        {
-          getLabel: "label",
-          getValue: "value",
-          items: drilldownOptions,
-          onItemSelect: setColumnProp,
-          selectedItem: colProp.value,
-          label: colProp.type === "prop" ? t("pivot_view.label_ddcolumnprop") : t("pivot_view.label_ddcolumn")
-        }
-      ),
-      /* @__PURE__ */ React13__default.createElement(
-        SelectOption,
-        {
-          getLabel: "label",
-          getValue: "value",
-          items: drilldownOptions,
-          onItemSelect: setRowProp,
-          selectedItem: rowProp.value,
-          label: rowProp.type === "prop" ? t("pivot_view.label_ddrowprop") : t("pivot_view.label_ddrow")
-        }
-      ),
-      /* @__PURE__ */ React13__default.createElement(
-        SelectOption,
-        {
-          getLabel: "label",
-          getValue: "value",
-          items: measureOptions,
-          label: t("pivot_view.label_valmeasure"),
-          onItemSelect: setValueProp,
-          selectedItem: valProp.value
-        }
-      ),
-      /* @__PURE__ */ React13__default.createElement(
-        SelectObject,
-        {
-          getLabel: "label",
-          getValue: "value",
-          items: formatterKeyOptions,
-          label: t("pivot_view.label_formatter"),
-          onItemSelect: (item) => setFormat(valProp.value, item.value),
-          selectedItem: formatterKey
-        }
-      ),
-      downloadToolbar
-    ), warnings.length > 0 ? warnings : null),
-    /* @__PURE__ */ React13__default.createElement(Box, { className: classes.colContent }, preview)
-  );
+        getLabel: "label",
+        getValue: "value",
+        items: drilldownOptions,
+        onItemSelect: setColumnProp,
+        selectedItem: colProp.value,
+        label: colProp.type === "prop" ? t("pivot_view.label_ddcolumnprop") : t("pivot_view.label_ddcolumn")
+      }
+    ),
+    /* @__PURE__ */ React13__default.createElement(
+      SelectOption,
+      {
+        getLabel: "label",
+        getValue: "value",
+        items: drilldownOptions,
+        onItemSelect: setRowProp,
+        selectedItem: rowProp.value,
+        label: rowProp.type === "prop" ? t("pivot_view.label_ddrowprop") : t("pivot_view.label_ddrow")
+      }
+    ),
+    /* @__PURE__ */ React13__default.createElement(
+      SelectOption,
+      {
+        getLabel: "label",
+        getValue: "value",
+        items: measureOptions,
+        label: t("pivot_view.label_valmeasure"),
+        onItemSelect: setValueProp,
+        selectedItem: valProp.value
+      }
+    ),
+    /* @__PURE__ */ React13__default.createElement(
+      SelectObject,
+      {
+        getLabel: "label",
+        getValue: "value",
+        items: formatterKeyOptions,
+        label: t("pivot_view.label_formatter"),
+        onItemSelect: (item) => setFormat(valProp.value, item.value),
+        selectedItem: formatterKey
+      }
+    ),
+    downloadToolbar
+  ), warnings.length > 0 ? warnings : null), /* @__PURE__ */ React13__default.createElement(Box, { className: classes.colContent }, preview));
 }
 function MatrixTable(props) {
   const { data, formatter: formatter2, headers, ...mantineReactTableProps } = props;
-  const columns = useMemo(() => headers.map((header, colIndex) => ({
-    accesorKey: header,
-    Cell: ({ row }) => colIndex > 0 && typeof row.original[colIndex] === "number" ? formatter2(row.original[colIndex]) : row.original[colIndex],
-    header,
-    mantineTableBodyCellProps: {
-      align: colIndex > 0 ? "right" : "left"
-    }
-  })), [headers]);
-  const tableProps = useMemo(() => ({
-    enableBottomToolbar: false,
-    enableColumnFilterModes: true,
-    enableColumnResizing: true,
-    enableColumnVirtualization: true,
-    enableTopToolbar: false,
-    enablePagination: false,
-    enableRowNumbers: true,
-    enableRowVirtualization: true,
-    initialState: {
-      density: "xs"
-    },
-    mantineTableProps: {
-      sx: {
-        "& td": {
-          padding: "7px 10px!important"
+  const columns = useMemo(
+    () => headers.map(
+      (header, colIndex) => ({
+        accesorKey: header,
+        Cell: ({ row }) => colIndex > 0 && typeof row.original[colIndex] === "number" ? formatter2(row.original[colIndex]) : row.original[colIndex],
+        header,
+        mantineTableBodyCellProps: {
+          align: colIndex > 0 ? "right" : "left"
         }
+      })
+    ),
+    [headers]
+  );
+  const tableProps = useMemo(
+    () => ({
+      enableBottomToolbar: false,
+      enableColumnFilterModes: true,
+      enableColumnResizing: true,
+      enableColumnVirtualization: true,
+      enableTopToolbar: false,
+      enablePagination: false,
+      enableRowNumbers: true,
+      enableRowVirtualization: true,
+      initialState: {
+        density: "xs"
       },
-      withColumnBorders: true
-    },
-    mantinePaperProps: {
-      id: "query-results-pivot-view-preview",
-      withBorder: false,
-      sx: (theme) => ({
-        height: "100%",
-        padding: `0 ${theme.spacing.sm}`,
-        [theme.fn.largerThan("lg")]: {
-          padding: 0
+      mantineTableProps: {
+        sx: {
+          "& td": {
+            padding: "7px 10px!important"
+          }
+        },
+        withColumnBorders: true
+      },
+      mantinePaperProps: {
+        id: "query-results-pivot-view-preview",
+        withBorder: false,
+        sx: (theme) => ({
+          height: "100%",
+          padding: `0 ${theme.spacing.sm}`,
+          [theme.fn.largerThan("lg")]: {
+            padding: 0
+          }
+        })
+      },
+      mantineTableContainerProps: {
+        id: "query-results-pivot-view-table",
+        sx: {
+          height: "100%"
+        }
+      },
+      rowVirtualizerProps: {
+        measureElement() {
+          return 37;
         }
-      })
-    },
-    mantineTableContainerProps: {
-      id: "query-results-pivot-view-table",
-      sx: {
-        height: "100%"
-      }
-    },
-    rowVirtualizerProps: {
-      measureElement() {
-        return 37;
       }
-    }
-  }), []);
+    }),
+    []
+  );
   const table = useMantineReactTable({
     ...tableProps,
     ...mantineReactTableProps,
@@ -5876,9 +5843,7 @@ function stringifyMatrix(matrix, formatter2, format2) {
   const safeFormatter = (value) => value === void 0 ? "" : safeQuoter(formatter2(value));
   return [
     matrix.headers.map(safeQuoter).join(joint),
-    ...matrix.data.map(
-      (row) => [safeQuoter(row[0]), ...row.slice(1).map(safeFormatter)].join(joint)
-    )
+    ...matrix.data.map((row) => [safeQuoter(row[0]), ...row.slice(1).map(safeFormatter)].join(joint))
   ].join("\n");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [