@datawheel/bespoke 0.5.0 → 0.5.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Header, px, Accordion, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Breadcrumbs, Col } from '@mantine/core';
-import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, memo, useImperativeHandle } from 'react';
+import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Accordion, Header, px, FileInput, SimpleGrid, Burger, Collapse, HoverCard, CopyButton, Breadcrumbs, Col } from '@mantine/core';
+import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, createElement, memo, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
 import * as d3Array from 'd3-array';
@@ -21,11 +21,12 @@ import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
-import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconTable, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconCheck, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconCheck, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
+import { MantineReactTable } from 'mantine-react-table';
 import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import dynamic from 'next/dynamic';
@@ -44,8 +45,8 @@ import HardBreak from '@tiptap/extension-hard-break';
 import TextAlign from '@tiptap/extension-text-align';
 import Placeholder from '@tiptap/extension-placeholder';
 import Typography from '@tiptap/extension-typography';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { Prism } from '@mantine/prism';
-import { MantineReactTable } from 'mantine-react-table';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
@@ -53,7 +54,6 @@ import { select } from 'd3-selection';
 import { saveElement } from 'd3plus-export';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
 import * as d3 from 'd3';
@@ -602,7 +602,8 @@ var init_cms = __esm({
       NAV: "nav",
       // todo1.0, how to put custom blocks in here?
       RESET_BUTTON: "reset_button",
-      COMPARISON_BUTTON: "comparison_button"
+      COMPARISON_BUTTON: "comparison_button",
+      TABLE: "table"
     };
     BLOCK_LOGIC_TYPES = {
       GENERATOR: "generator",
@@ -615,7 +616,8 @@ var init_cms = __esm({
       BLOCK_TYPES.GENERATOR,
       BLOCK_TYPES.SELECTOR,
       BLOCK_TYPES.VIZ,
-      BLOCK_TYPES.IMAGE
+      BLOCK_TYPES.IMAGE,
+      BLOCK_TYPES.TABLE
     ];
     BLOCK_FIELDS = {
       ALT: "alt",
@@ -635,6 +637,7 @@ var init_cms = __esm({
       SRC: "src",
       SLUG: "slug",
       SUBTITLE: "subtitle",
+      TABLE: "table",
       TITLE: "title",
       TOOLTIP: "tooltip",
       TWITTER: "twitter",
@@ -772,7 +775,8 @@ var init_cms = __esm({
         }
       ],
       [BLOCK_TYPES.GENERATOR]: [],
-      [BLOCK_TYPES.VIZ]: []
+      [BLOCK_TYPES.VIZ]: [],
+      [BLOCK_TYPES.TABLE]: []
     };
     BLOCK_SETTINGS = {
       NAME: "name",
@@ -6046,6 +6050,68 @@ var init_ComparisonButton = __esm({
     init_ComparisonProvider();
   }
 });
+function Table({ columns = [], data = [], tableProps = {}, sectionId = null }) {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [translations, setTranslations] = useState({});
+  const columnsKeys = useMemo(() => columns.map((column) => column.accessorKey), [columns]);
+  const filteredData = useMemo(() => data.filter(
+    (item) => typeof item === "object" && item !== null && !Array.isArray(item) && Object.keys(item).some((val) => columnsKeys.includes(val))
+  ), [columnsKeys, data]);
+  const richColumns = useMemo(() => columns.map((column) => ({
+    ...column,
+    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}` }),
+    filterFn: "contains"
+  })), [columns]);
+  const { locale } = useRouter();
+  useEffect(() => {
+    const loadLocalizedComponent = async () => {
+      try {
+        const lang = locale || "en";
+        const componentName = `${lang.toUpperCase()}`;
+        const componentModule = await import(`mantine-react-table/locales/${lang}.js`);
+        setTranslations(componentModule[`MRT_Localization_${componentName}`]);
+      } catch (error) {
+        console.error("Error loading translations:", error);
+      }
+    };
+    loadLocalizedComponent();
+  }, [locale]);
+  return /* @__PURE__ */ jsx(
+    MantineReactTable,
+    {
+      ...tableProps,
+      autoResetPageIndex: false,
+      columns: richColumns,
+      data: filteredData,
+      enableColumnFilterModes: true,
+      enableFilterMatchHighlighting: false,
+      globalFilterFn: "contains",
+      layoutMode: "grid",
+      localization: translations,
+      onIsFullScreenChange: (val) => {
+        const element = document.getElementById(`section-${sectionId}`);
+        if (element) {
+          if (val) {
+            element.style.zIndex = "10";
+          } else {
+            element.style.zIndex = "1";
+          }
+        }
+        setIsFullScreen(val);
+      },
+      state: {
+        ...tableProps.state,
+        isFullScreen
+      }
+    }
+  );
+}
+var init_Table = __esm({
+  "frontend/components/report/blocks/Table.tsx"() {
+    init_esm_shims();
+    init_RichText();
+  }
+});
 var localeDefault8, frontEndMessage, errorStub, propify, d3plusPropify_default;
 var init_d3plusPropify = __esm({
   "libs/d3plusPropify.ts"() {
@@ -6264,6 +6330,7 @@ var init_blocks = __esm({
     init_Related();
     init_ResetButton();
     init_ComparisonButton();
+    init_Table();
     VizView = dynamic(
       () => Promise.resolve().then(() => (init_Viz(), Viz_exports)),
       { ssr: false }
@@ -6280,7 +6347,8 @@ var init_blocks = __esm({
       [BLOCK_TYPES.NAV]: NavView,
       [BLOCK_TYPES.RELATED]: RelatedView,
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonView,
-      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview
+      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview,
+      [BLOCK_TYPES.TABLE]: Table
     };
     blocks_default = TypeRenderers;
   }
@@ -6361,10 +6429,12 @@ var init_stringifyObject = __esm({
           str += "false";
         else if (val === void 0)
           str = null;
+        else if (["boolean", "number"].includes(typeof val))
+          str += val;
         else
           str += `"${val}"`;
         return str;
-      }).filter(Boolean).join(`,${newLine(depth + 1)}`)}${newLine(depth)}${isArray ? "]" : "}"}`;
+      }).filter((val) => val !== null).join(`,${newLine(depth + 1)}`)}${newLine(depth)}${isArray ? "]" : "}"}`;
     };
     stringifyObject_default = stringifyObject;
   }
@@ -12837,6 +12907,7 @@ function SelectorUI(props) {
         type: selectorType,
         component: selectorComponent,
         hideLabel,
+        defaultValue,
         optionsType,
         options
       };
@@ -13431,6 +13502,516 @@ var init_StatUI = __esm({
     init_cms();
   }
 });
+function TableUI(props) {
+  const { executeButton, id, onChange, referenceContent = {}, referenceLocale, simpleState } = props;
+  const { columns: referenceColumns } = referenceContent;
+  const locale = useCurrentLocale();
+  const isActiveRefenceContent = useMemo(
+    () => locale !== referenceLocale && referenceContent && Object.keys(referenceContent).length > 0,
+    [locale, referenceContent, referenceLocale]
+  );
+  const variables = useInputVariablesFlat(id);
+  const [columnOrder, setColumnOrder] = useState([]);
+  const [customLabels, customLabelsHandler] = useListState([]);
+  const [defaultVariableList, setDefaultVariableList] = useState([]);
+  const [isInvalidStructure, setIsInvalidStructure] = useState(false);
+  const [optionVariableMap, setOptionVariableMap] = useState({});
+  const [paginationState, setPaginationState] = useState(defaultPaginationState);
+  const [paginationProps, setPaginationProps] = useState({ rowsPerPageOptions: defaultPageSizes });
+  const [selectedColumns, selectedColumnsHandler] = useListState([]);
+  const [selectedVariable, setSelectedVariable] = useState(null);
+  const [tableProps, setTableProps] = useSetState(defaultTableGlobalProps);
+  const [initialTableState, setInitialTableState] = useState(defaultInitialStateProps);
+  const [tableState, setTableState] = useState({});
+  const allChecked = useMemo(() => selectedColumns.every((column) => column.checked), [selectedColumns]);
+  const indeterminate = useMemo(() => {
+    return selectedColumns.some((column) => column.checked) && !allChecked;
+  }, [allChecked, selectedColumns]);
+  useEffect(() => {
+    if (!simpleState || !Object.keys(simpleState).length)
+      return;
+    const variableContent = variables[simpleState.variable] || [];
+    const columns = /* @__PURE__ */ new Set();
+    variableContent.filter((item) => typeof item === "object" && item !== null).forEach((item) => {
+      Object.keys(item).forEach((key) => columns.add(key));
+    });
+    const stateColumns = {};
+    if (simpleState.columns && Object.keys(simpleState.columns)) {
+      simpleState.columns.forEach((column) => {
+        stateColumns[column.accessorKey] = column.header;
+      });
+    }
+    const keyList = [];
+    const keyLabels = [];
+    Array.from(columns).forEach((key) => {
+      keyLabels.push({
+        key,
+        label: stateColumns[key] || key
+      });
+      keyList.push({
+        checked: stateColumns[key] ? true : false,
+        key: randomId(),
+        label: key
+      });
+    });
+    customLabelsHandler.setState(keyLabels);
+    selectedColumnsHandler.setState(keyList);
+    const { initialState: initialState4 = {}, state = {}, mantinePaginationProps = {}, ...props2 } = simpleState.tableProps || {};
+    setColumnOrder(state.columnOrder || []);
+    setPaginationProps(mantinePaginationProps);
+    setPaginationState(initialState4.pagination);
+    setTableProps({ ...props2 });
+    setTableState(state);
+    setInitialTableState(initialState4);
+    setSelectedVariable(simpleState.variable || "");
+  }, []);
+  useEffect(() => {
+    if (!variables) {
+      setOptionVariableMap({});
+      return;
+    }
+    const validVariableMap = Object.entries(variables).filter(([_2, variableContent]) => isValidSelectorOptionsArray2(variableContent)).reduce((acc, [variableName, variableContent]) => {
+      acc[variableName] = variableContent;
+      return acc;
+    }, {});
+    setOptionVariableMap(validVariableMap);
+    const validDefaultIdList = Object.keys(validVariableMap);
+    setDefaultVariableList(validDefaultIdList);
+  }, [variables]);
+  const handleVariableSelect = (value) => {
+    setSelectedVariable(value);
+    if (!value || !isValidSelectorOptionsArray2(optionVariableMap[value])) {
+      setIsInvalidStructure(false);
+      selectedColumnsHandler.setState([]);
+      return;
+    }
+    const items = optionVariableMap[value];
+    if (items.every((item) => typeof item === "object" && item === null)) {
+      setIsInvalidStructure(false);
+      selectedColumnsHandler.setState([]);
+      return;
+    }
+    if (items.every((item) => typeof item === "object" && item !== null)) {
+      setIsInvalidStructure(false);
+    } else {
+      setIsInvalidStructure(true);
+    }
+    const uniqueKeys = /* @__PURE__ */ new Set();
+    items.filter((item) => typeof item === "object" && item !== null).forEach((item) => {
+      Object.keys(item).forEach((key) => uniqueKeys.add(key));
+    });
+    const keyList = [];
+    const keyLabels = [];
+    const columns = [];
+    Array.from(uniqueKeys).forEach((key) => {
+      keyList.push({
+        checked: true,
+        key: randomId(),
+        label: key
+      });
+      keyLabels.push({
+        key,
+        label: key
+      });
+      columns.push(key);
+    });
+    selectedColumnsHandler.setState(keyList);
+    customLabelsHandler.setState(keyLabels);
+    setColumnOrder(columns);
+  };
+  useEffect(() => {
+    const columnLabelsMap = {};
+    customLabels.forEach((column) => {
+      columnLabelsMap[column.key] = column.label;
+    });
+    const columns = selectedColumns.filter((column) => column.checked).map((column) => ({
+      accessorKey: column.label,
+      header: columnLabelsMap[column.label]
+    }));
+    const extendedInitialTableState = {
+      ...initialTableState,
+      pagination: paginationState
+    };
+    const extendedTableState = {
+      ...tableState,
+      columnOrder
+    };
+    const logicObj = {
+      columns,
+      data: selectedVariable ? `variables["${selectedVariable}"]` : [],
+      tableProps: {
+        ...tableProps,
+        initialState: extendedInitialTableState,
+        state: extendedTableState,
+        mantinePaginationProps: paginationProps
+      },
+      variable: selectedVariable || ""
+    };
+    const logic = `return ${stringifyObject_default(logicObj)};`;
+    const simpleState2 = {
+      columns,
+      data: selectedVariable ? `variables["${selectedVariable}"]` : [],
+      tableProps: {
+        ...tableProps,
+        initialState: extendedInitialTableState,
+        state: extendedTableState,
+        mantinePaginationProps: paginationProps
+      },
+      variable: selectedVariable || ""
+    };
+    onChange(simpleState2, logic);
+  }, [
+    columnOrder,
+    customLabels,
+    paginationProps,
+    paginationState,
+    selectedColumns,
+    selectedVariable,
+    tableProps,
+    tableState,
+    initialTableState
+  ]);
+  const onDragEnd = useCallback((result) => {
+    if (!result.destination || result.source.index === result.destination.index)
+      return;
+    const newOrder = [...columnOrder];
+    const [draggedItem] = newOrder.splice(result.source.index, 1);
+    newOrder.splice(result.destination.index, 0, draggedItem);
+    setColumnOrder(newOrder);
+    setTableState((current) => {
+      const newState = current;
+      newState["columnOrder"] = newOrder;
+      return newState;
+    });
+  }, [columnOrder]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { mb: "sm", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          clearable: true,
+          data: defaultVariableList,
+          description: "Select an array of data available in the block inputs to use as data input for the table.",
+          label: "Data input",
+          onChange: (value) => handleVariableSelect(value),
+          searchable: true,
+          value: selectedVariable
+        }
+      ),
+      selectedVariable && optionVariableMap[selectedVariable] && selectedColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input.Wrapper,
+          {
+            description: "Select the columns to display in the table.",
+            error: isInvalidStructure && "There is a mix of types in the input data. Only object types rows will be kept.",
+            label: "Selected columns",
+            children: /* @__PURE__ */ jsxs(Stack, { mt: "xs", children: [
+              /* @__PURE__ */ jsxs(Group, { grow: true, children: [
+                /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Selected" }),
+                /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Label" }),
+                isActiveRefenceContent && /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+                  /* @__PURE__ */ jsx(Text, { fz: "xs", children: "Reference Label" }),
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "light",
+                      size: "xs",
+                      rightSection: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(IconLanguage, { size: rem(12) }) }),
+                      children: referenceLocale.toUpperCase()
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: allChecked,
+                  indeterminate,
+                  label: "All",
+                  onChange: () => selectedColumnsHandler.setState((current) => current.map((value) => ({ ...value, checked: !allChecked })))
+                }
+              ),
+              /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: 300, children: /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "columns", children: (droppableProvided) => /* @__PURE__ */ jsx("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps, children: columnOrder.map((option, index) => {
+                const columnIndex = selectedColumns.findIndex((col) => col.label === option);
+                const column = selectedColumns[columnIndex];
+                return /* @__PURE__ */ jsx(
+                  Draggable,
+                  {
+                    draggableId: `${column.label}`,
+                    index,
+                    isDragDisabled: !column.checked,
+                    children: (draggableProvided) => /* @__PURE__ */ jsx(
+                      ColumnRenderer,
+                      {
+                        customLabels,
+                        customLabelsHandler,
+                        index: columnIndex,
+                        isActiveRefenceContent,
+                        option: column,
+                        ref: draggableProvided.innerRef,
+                        referenceColumns,
+                        selectedColumnsHandler,
+                        ...draggableProvided.draggableProps,
+                        ...draggableProvided.dragHandleProps
+                      }
+                    )
+                  },
+                  column.label
+                );
+              }) }) }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Accordion, { variant: "separated", children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "custom-props", children: [
+          /* @__PURE__ */ jsx(Accordion.Control, { children: "Custom properties" }),
+          /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs(
+            Input.Wrapper,
+            {
+              description: "Select the needed table options.",
+              label: "Table options",
+              children: [
+                /* @__PURE__ */ jsx(Group, { mt: "xs", children: Object.keys(tableProps).map((prop) => /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: tableProps[prop],
+                    label: /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        label: tableGlobalPropsDesc[prop]?.desc || prop,
+                        multiline: true,
+                        children: /* @__PURE__ */ jsx(Text, { children: tableGlobalPropsDesc[prop]?.label || prop })
+                      }
+                    ),
+                    onChange: () => setTableProps({ [prop]: !tableProps[prop] })
+                  },
+                  `table-prop-${prop}`
+                )) }),
+                tableProps?.enablePagination && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Divider, { mt: "xs" }),
+                  /* @__PURE__ */ jsxs(
+                    Input.Wrapper,
+                    {
+                      description: "Customize initial pagination properties.",
+                      label: "Pagination props",
+                      mt: "xs",
+                      children: [
+                        /* @__PURE__ */ jsxs(Group, { grow: true, children: [
+                          /* @__PURE__ */ jsx(
+                            NumberInput,
+                            {
+                              label: "Initial page",
+                              min: 0,
+                              onChange: (value) => {
+                                setPaginationState((current) => ({
+                                  ...current,
+                                  pageIndex: value
+                                }));
+                              },
+                              value: paginationState.pageIndex
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Select,
+                            {
+                              data: paginationProps.rowsPerPageOptions || [],
+                              getCreateLabel: (value) => `+ Create ${value}`,
+                              label: "Initial page size",
+                              onChange: (value) => {
+                                setPaginationState((current) => ({
+                                  ...current,
+                                  pageSize: parseInt(value, 10)
+                                }));
+                              },
+                              searchable: true,
+                              value: paginationState.pageSize.toString()
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(Group, { align: "flex-end", grow: true, children: [
+                          /* @__PURE__ */ jsx(
+                            MultiSelect,
+                            {
+                              clearable: true,
+                              creatable: true,
+                              data: paginationProps.rowsPerPageOptions || [],
+                              getCreateLabel: (value) => `+ Create ${value}`,
+                              label: "Page size options",
+                              onChange: (value) => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: value.sort((a2, b2) => parseInt(a2, 10) - parseInt(b2, 10))
+                                }));
+                                if (value && value.length > 0 && !value.includes(paginationState.pageSize.toString())) {
+                                  setPaginationState((current) => ({
+                                    ...current,
+                                    pageSize: parseInt(value[0], 10)
+                                  }));
+                                }
+                              },
+                              onCreate: (value) => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: [...current.rowsPerPageOptions || [], value].sort((a2, b2) => parseInt(a2, 10) - parseInt(b2, 10))
+                                }));
+                                return value;
+                              },
+                              searchable: true,
+                              value: paginationProps.rowsPerPageOptions || []
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              color: "yellow",
+                              onClick: () => {
+                                setPaginationProps((current) => ({
+                                  ...current,
+                                  rowsPerPageOptions: defaultPageSizes
+                                }));
+                                setPaginationState(defaultPaginationState);
+                              },
+                              children: "Reset page sizes values"
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) }) })
+        ] }) })
+      ] })
+    ] }),
+    executeButton
+  ] });
+}
+var defaultTableGlobalProps, tableGlobalPropsDesc, defaultInitialStateProps, defaultPageSizes, defaultPaginationState, isValidSelectorOptionsArray2, ColumnRenderer;
+var init_TableUI = __esm({
+  "components/blocks/types/simpleEditors/TableUI.tsx"() {
+    init_esm_shims();
+    init_stringifyObject();
+    init_hooks();
+    defaultTableGlobalProps = {
+      enableBottomToolbar: true,
+      enableColumnActions: true,
+      enableColumnFilters: true,
+      enableColumnResizing: true,
+      enableDensityToggle: true,
+      enableFullScreenToggle: false,
+      enableGlobalFilter: true,
+      enableHiding: true,
+      enablePagination: true,
+      enableSorting: true,
+      enableStickyHeader: true,
+      enableTopToolbar: true
+    };
+    tableGlobalPropsDesc = {
+      enableBottomToolbar: {
+        label: "Enable bottom toolbar",
+        desc: "Show or hide the bottom toolbar. By disabling it, pagination will also be hidden."
+      },
+      enableColumnActions: {
+        label: "Enable column actions",
+        desc: "Enables or disables column actions for all columns. Column actions include sort, filter, show/hide column and reset column size."
+      },
+      enableColumnFilters: {
+        label: "Enable column filters",
+        desc: "Enables or disables the filter options available on columns."
+      },
+      enableColumnResizing: {
+        label: "Enable column resizing",
+        desc: "Enables the column resizing feature for all columns."
+      },
+      enableDensityToggle: {
+        label: "Enable density toggle",
+        desc: "Enable the density toggle that allows users to modify the height of each row. Disabling it will hide the density toggle button in the top toolbar."
+      },
+      enableFullScreenToggle: {
+        label: "Enable full screen toggle",
+        desc: "Enable or disable the full screen toggle feature. Disabling it will hide the full screen toggle button in the top toolbar."
+      },
+      enableGlobalFilter: {
+        label: "Enable global filter",
+        desc: "Enable global filter feature to filter data on all columns and rows. Disabling it will hide the global filter button in the top toolbar."
+      },
+      enableHiding: {
+        label: "Enable hiding",
+        desc: "Enable hiding columns feature. Disabling it will hide the hiding button in the top toolbar."
+      },
+      enablePagination: {
+        label: "Enable pagination",
+        desc: "Enable pagination feature. Disabling it will hide the pagination options in the bottom toolbar."
+      },
+      enableSorting: {
+        label: "Enable sorting",
+        desc: "Enable sorting feature for all columns."
+      },
+      enableStickyHeader: {
+        label: "Enable sticky header",
+        desc: "Allows you to maintain the column headers when scrolling through the rows of the table."
+      },
+      enableTopToolbar: {
+        label: "Enable top toolbar",
+        desc: "Show or hide the top toolbar. By disabling it, globar filter, hiding, density and full screen toggles will also be hidden."
+      }
+    };
+    defaultInitialStateProps = {
+      density: "xs"
+    };
+    defaultPageSizes = ["5", "10", "15", "20", "25", "30", "50", "100"];
+    defaultPaginationState = {
+      pageIndex: 0,
+      pageSize: 10
+    };
+    isValidSelectorOptionsArray2 = (variable) => variable && Array.isArray(variable) && variable.some((elemento) => typeof elemento === "object" && elemento !== null);
+    ColumnRenderer = forwardRef(
+      function ColumnRendererComponent({
+        customLabels,
+        customLabelsHandler,
+        index,
+        isActiveRefenceContent = false,
+        option,
+        referenceColumns = [],
+        selectedColumnsHandler,
+        ...rest
+      }, ref) {
+        const customLabel = customLabels.find((label) => label.key === option.label)?.label || "";
+        const referenceColumn = referenceColumns.find((column) => column.accessorKey === option.label);
+        const referenceColumnLabel = referenceColumn?.header || option.label;
+        return /* @__PURE__ */ jsxs(Group, { grow: true, ref, ...rest, children: [
+          /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(IconGripVertical, {}),
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: option.checked,
+                label: option.label,
+                onChange: (event) => selectedColumnsHandler.setItemProp(index, "checked", event.currentTarget.checked)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              disabled: !option.checked,
+              onChange: (event) => customLabelsHandler.setItemProp(index, "label", event.currentTarget.value),
+              value: customLabel
+            }
+          ),
+          isActiveRefenceContent && /* @__PURE__ */ jsx(
+            Input,
+            {
+              disabled: true,
+              value: referenceColumnLabel
+            }
+          )
+        ] }, `table-group-${option.label}-${index}`);
+      }
+    );
+  }
+});
 
 // components/blocks/types/simpleEditors/index.js
 var simpleEditors, simpleEditors_default;
@@ -13445,6 +14026,7 @@ var init_simpleEditors = __esm({
     init_TitleUI();
     init_ComparisonButtonUI();
     init_StatUI();
+    init_TableUI();
     simpleEditors = {
       [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
       [BLOCK_TYPES.NAV]: NavUI,
@@ -13452,7 +14034,8 @@ var init_simpleEditors = __esm({
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonUI,
       [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonUI,
       [BLOCK_TYPES.TITLE]: TitleUI,
-      [BLOCK_TYPES.STAT]: StatUI
+      [BLOCK_TYPES.STAT]: StatUI,
+      [BLOCK_TYPES.TABLE]: TableUI
     };
     simpleEditors_default = simpleEditors;
   }
@@ -14017,7 +14600,7 @@ function useCurrentLocale2() {
     if (paramLocale && paramLocale !== "" && locales4.includes(paramLocale) && paramLocale !== currentLocale) {
       dispatch(actions_exports.setCurrentLocale(paramLocale));
     }
-  }, [paramLocale]);
+  }, []);
   return currentLocale;
 }
 var init_useCurrentLocale = __esm({
@@ -14158,6 +14741,63 @@ var init_ComparisonButton2 = __esm({
     init_esm_shims();
   }
 });
+function TablePreview({ columns = [], id, data = [], tableProps = {} }) {
+  const [translations, setTranslations] = useState({});
+  const { initialState: initialState4 } = tableProps;
+  const pageIndex = initialState4?.pagination?.pageIndex;
+  const pageSize = initialState4?.pagination?.pageSize;
+  const tableId = `table-${[id, pageIndex, pageSize].filter((d2) => d2).join("-")}`;
+  const columnsKeys = useMemo(() => columns.map((column) => column.accessorKey), [columns]);
+  const filteredData = useMemo(() => data.filter(
+    (item) => typeof item === "object" && item !== null && !Array.isArray(item) && Object.keys(item).some((val) => columnsKeys.includes(val))
+  ), [columnsKeys, data]);
+  const richColumns = useMemo(() => columns.map((column) => ({
+    ...column,
+    Cell: ({ renderedCellValue }) => /* @__PURE__ */ jsx(RichText, { html: `${renderedCellValue}` }),
+    filterFn: "contains"
+  })), [columns]);
+  const locale = useCurrentLocale();
+  useEffect(() => {
+    const loadLocalizedComponent = async () => {
+      try {
+        const lang = locale || "en";
+        const componentName = `${lang.toUpperCase()}`;
+        const componentModule = await import(`mantine-react-table/locales/${lang}.js`);
+        setTranslations(componentModule[`MRT_Localization_${componentName}`]);
+      } catch (error) {
+        console.error("Error loading translations:", error);
+      }
+    };
+    loadLocalizedComponent();
+  }, [locale]);
+  return /* @__PURE__ */ createElement(
+    MantineReactTable,
+    {
+      ...tableProps,
+      autoResetPageIndex: false,
+      columns: richColumns,
+      data: filteredData,
+      enableColumnFilterModes: true,
+      enableFilterMatchHighlighting: false,
+      globalFilterFn: "contains",
+      key: tableId,
+      layoutMode: "grid",
+      localization: translations,
+      state: {
+        ...tableProps.state,
+        // prevents the user from getting the full screen table overlay error on cms
+        isFullScreen: false
+      }
+    }
+  );
+}
+var init_Table2 = __esm({
+  "components/blocks/types/renderers/Table.tsx"() {
+    init_esm_shims();
+    init_RichText();
+    init_hooks();
+  }
+});
 
 // components/blocks/types/renderers/Viz.tsx
 var Viz_exports2 = {};
@@ -14288,6 +14928,7 @@ var init_renderers = __esm({
     init_Related2();
     init_ResetButton2();
     init_ComparisonButton2();
+    init_Table2();
     VizPreview = dynamic(
       () => Promise.resolve().then(() => (init_Viz2(), Viz_exports2)),
       { ssr: false }
@@ -14304,7 +14945,8 @@ var init_renderers = __esm({
       [BLOCK_TYPES.NAV]: NavPreview,
       [BLOCK_TYPES.RELATED]: RelatedPreview,
       [BLOCK_TYPES.RESET_BUTTON]: ResetButtonPreview,
-      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview2
+      [BLOCK_TYPES.COMPARISON_BUTTON]: ComparisonButtonPreview2,
+      [BLOCK_TYPES.TABLE]: TablePreview
     };
     renderers_default = renderersMap;
   }
@@ -14323,7 +14965,8 @@ var init_icons = __esm({
       "visualization": IconChartBar,
       "paragraph": IconAlignLeft,
       "selector": IconSelector,
-      "image": IconPhoto
+      "image": IconPhoto,
+      "table": IconTable
     };
   }
 });
@@ -14350,7 +14993,8 @@ var init_labels = __esm({
       "related": "Related Reports",
       // (?)
       "nav": "Navigation",
-      "image": "Image"
+      "image": "Image",
+      "table": "Table"
     };
   }
 });
@@ -14446,6 +15090,12 @@ var init_types = __esm({
         renderer: renderers_default[BLOCK_TYPES.COMPARISON_BUTTON],
         renderPreviewOnEdit: true,
         evalWhenNonActive: true
+      },
+      [BLOCK_TYPES.TABLE]: {
+        type: BLOCK_TYPES.TABLE,
+        renderer: renderers_default[BLOCK_TYPES.TABLE],
+        renderPreviewOnEdit: false,
+        evalWhenNonActive: false
       }
     };
     types_default = allBlocks;
@@ -14553,6 +15203,13 @@ function Block({ blockId, active = true, asComparison = false }) {
         void 0,
         blockContext
       );
+      if (block.type === BLOCK_TYPES.TABLE) {
+        setContent3({
+          sectionId: block.section_id,
+          ...vars
+        });
+        return;
+      }
       setContent3(vars);
       return;
     };
@@ -17541,7 +18198,7 @@ function DimensionAutocomplete(props) {
         value: _variant,
         onChange: setVariant
       },
-      dimensionId
+      `dimension-${dimensionId}`
     ),
     /* @__PURE__ */ jsx(
       Text,
@@ -17562,7 +18219,7 @@ function DimensionAutocomplete(props) {
         onChange: setMember,
         locale
       },
-      _variant
+      `variant-${_variant}`
     )
   ] });
 }
@@ -18988,6 +19645,7 @@ function CMSHeader(props) {
       locale: previewLocale,
       output: "full"
     })).then(({ results }) => {
+      dispatch(actions_exports.setCurrentLocale(previewLocale));
       if (results && results.length === dimensions.length && dimensions.length) {
         dispatch(actions_exports.recalculateVariables(resource, { previews: results }));
       } else {
@@ -20333,6 +20991,11 @@ var unlocalizedKeys = {
   ],
   [BLOCK_TYPES.STAT]: [
     ...UNLOCALIZED_ICON_KEYS
+  ],
+  [BLOCK_TYPES.TABLE]: [
+    "data",
+    "tableProps",
+    "variable"
   ]
 };
 var reduceContent = (acc, d2) => ({ ...acc, [d2.locale]: { ...d2, content: d2.content } });
@@ -20433,10 +21096,14 @@ function Block2({ id, modified, callbacks, inline }) {
             newSimple[key] = unlocalizedContent.simple[key];
           }
         });
+        const logicObj = { ...newSimple };
+        if (block.type === BLOCK_TYPES.SELECTOR) {
+          logicObj.options = logicObj.options[logicObj.optionsType];
+        }
         newContentByLocale[locale].content = {
           ...newContentByLocale[locale].content,
           simple: newSimple,
-          logic: `return ${stringifyObject_default(newSimple)}`
+          logic: `return ${stringifyObject_default(logicObj)}`
         };
       });
       return newContentByLocale;
@@ -20860,7 +21527,7 @@ var CreateBlockButton = ({ columns, columnIndex, section }) => {
           },
           sx: { ":hover": { backgroundColor: "#EBEBEB" } },
           children: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
-            /* @__PURE__ */ jsx(ActionIcon, { color: "blue", variant: "filled", size: "sm", radius: "xl", children: /* @__PURE__ */ jsx(BlockIcon2, { size: "0.8rem" }) }),
+            /* @__PURE__ */ jsx(ThemeIcon, { color: "blue", variant: "filled", size: "sm", radius: "xl", children: /* @__PURE__ */ jsx(BlockIcon2, { size: "0.8rem" }) }),
             /* @__PURE__ */ jsx(Text, { size: "xs", children: getBlockLabel(d2) || d2 })
           ] })
         }

package/dist/server.js

@@ -785,7 +785,8 @@ var BLOCK_CONTENT_TYPES = {
   NAV: "nav",
   // todo1.0, how to put custom blocks in here?
   RESET_BUTTON: "reset_button",
-  COMPARISON_BUTTON: "comparison_button"
+  COMPARISON_BUTTON: "comparison_button",
+  TABLE: "table"
 };
 var BLOCK_LOGIC_TYPES = {
   GENERATOR: "generator",
@@ -2538,7 +2539,9 @@ function dbReportFactory(db) {
     );
     const entities = await Report.findAll({
       where: idList.length > 0 ? { id: idList } : void 0,
-      include: include ? reportQuery.include : void 0
+      include: include ? reportQuery.include?.filter(
+        (i2) => typeof include === "string" ? i2["association"] === include : include
+      ) : void 0
     });
     if (idList.length === 0 || entities.length === idList.length) {
       return entities.map((entity) => {
@@ -2567,7 +2570,6 @@ function dbReportFactory(db) {
   }
   async function updateReport(data) {
     const { id, dimensions, sections, ...reportData } = data;
-    console.log(data, "CON DATA");
     const entity = await Report.findByPk(id, {
       include: reportQuery.include,
       rejectOnEmpty: true
@@ -7030,8 +7032,13 @@ function getInstalledPackageVersion(packageName) {
     mainPath.endsWith("/example") ? mainPath.replace("/example", "") : mainPath,
     "package-lock.json"
   );
-  const packageLock = JSON.parse(fs.readFileSync(packageLockPath, "utf-8"));
-  const version = packageLock.dependencies && packageLock.dependencies[packageName] && packageLock.dependencies[packageName].version !== "file:packages/reports" ? packageLock.dependencies[packageName].version : "0.dev";
+  let version;
+  try {
+    const packageLock = JSON.parse(fs.readFileSync(packageLockPath, "utf-8"));
+    version = packageLock.dependencies && packageLock.dependencies[packageName] && packageLock.dependencies[packageName].version !== "file:packages/reports" ? packageLock.dependencies[packageName].version : "0.dev";
+  } catch {
+    version = "0.vercel";
+  }
   return version || "Version not found";
 }
 function BespokeManagerServerSideProps(options) {
@@ -7045,20 +7052,35 @@ function BespokeManagerServerSideProps(options) {
     getServerSideProps: storeWrapper.getServerSideProps((store) => {
       const { dispatch } = store;
       return async (ctx) => {
+        const firstSegment = ctx.query[pathSegmentsKey];
+        const [page] = Array.isArray(firstSegment) ? firstSegment : [firstSegment];
         await dispatch(useDatabaseApi);
         const bespokeVersion = await getInstalledPackageVersion("@datawheel/bespoke");
         const preResult = await preResolve(store, ctx);
         if ("redirect" in preResult)
           return { props: preResult };
-        await Promise.all([
-          dispatch(readEntity("formatter", {})),
-          dispatch(readEntity("report", {
-            id: parseReportId(ctx.query[pathSegmentsKey]),
-            include: true
-          })),
-          // Mark the status as CMS environment
-          dispatch(statusActions.setStatus({ isCMS: true }))
-        ]);
+        if (page === "reports") {
+          if (parseReportId(ctx.query[pathSegmentsKey])) {
+            await Promise.all([
+              dispatch(readEntity("formatter", {})),
+              dispatch(readEntity("report", {
+                id: parseReportId(ctx.query[pathSegmentsKey]),
+                include: true
+              })),
+              statusActions.setStatus({ isCMS: true })
+            ]);
+          } else {
+            await Promise.all([
+              dispatch(readEntity("report", {
+                include: "dimensions"
+              })),
+              statusActions.setStatus({ isCMS: true })
+            ]);
+          }
+        }
+        if (page === "formatters") {
+          await dispatch(readEntity("formatter", {}));
+        }
         const postResult = await postResolve(store, ctx);
         return {
           props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {