@civicactions/cmsds-open-data-components 3.2.6-alpha.1 → 3.2.6-alpha.3

package/dist/main.js

@@ -1,6 +1,6 @@
 import "./main.css";
 import {jsxs as $hgUW1$jsxs, jsx as $hgUW1$jsx, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
-import $hgUW1$react, {useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect, useMemo as $hgUW1$useMemo} from "react";
+import $hgUW1$react, {useState as $hgUW1$useState, useRef as $hgUW1$useRef, useEffect as $hgUW1$useEffect, useMemo as $hgUW1$useMemo, useCallback as $hgUW1$useCallback} from "react";
 import {Button as $hgUW1$Button, Accordion as $hgUW1$Accordion, AccordionItem as $hgUW1$AccordionItem, TextField as $hgUW1$TextField, Spinner as $hgUW1$Spinner, Dropdown as $hgUW1$Dropdown, Alert as $hgUW1$Alert, Pagination as $hgUW1$Pagination, Dialog as $hgUW1$Dialog, Choice as $hgUW1$Choice, Tabs as $hgUW1$Tabs, TabPanel as $hgUW1$TabPanel, Tooltip as $hgUW1$Tooltip, Badge as $hgUW1$Badge, Table as $hgUW1$Table, TableBody as $hgUW1$TableBody, TableRow as $hgUW1$TableRow, TableCell as $hgUW1$TableCell, TableHead as $hgUW1$TableHead, TooltipIcon as $hgUW1$TooltipIcon} from "@cmsgov/design-system";
 import $hgUW1$proptypes from "prop-types";
 import {NavLink as $hgUW1$NavLink, useLocation as $hgUW1$useLocation, useSearchParams as $hgUW1$useSearchParams, Link as $hgUW1$Link, useNavigate as $hgUW1$useNavigate} from "react-router-dom";
@@ -13,6 +13,10 @@ import {useMediaQuery as $hgUW1$useMediaQuery} from "react-responsive";
 import $hgUW1$dompurify from "dompurify";
 import $hgUW1$lodashtruncate from "lodash.truncate";
 import {createColumnHelper as $hgUW1$createColumnHelper, useReactTable as $hgUW1$useReactTable, getCoreRowModel as $hgUW1$getCoreRowModel, getSortedRowModel as $hgUW1$getSortedRowModel, flexRender as $hgUW1$flexRender, getFilteredRowModel as $hgUW1$getFilteredRowModel, getPaginationRowModel as $hgUW1$getPaginationRowModel} from "@tanstack/react-table";
+import {KeyboardSensor as $hgUW1$KeyboardSensor, PointerSensor as $hgUW1$PointerSensor, useSensors as $hgUW1$useSensors, useSensor as $hgUW1$useSensor, DndContext as $hgUW1$DndContext, closestCenter as $hgUW1$closestCenter} from "@dnd-kit/core";
+import {sortableKeyboardCoordinates as $hgUW1$sortableKeyboardCoordinates, arrayMove as $hgUW1$arrayMove, SortableContext as $hgUW1$SortableContext, verticalListSortingStrategy as $hgUW1$verticalListSortingStrategy, useSortable as $hgUW1$useSortable} from "@dnd-kit/sortable";
+import {restrictToVerticalAxis as $hgUW1$restrictToVerticalAxis} from "@dnd-kit/modifiers";
+import {CSS as $hgUW1$CSS} from "@dnd-kit/utilities";
 import $hgUW1$reactdatepicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import {usePopper as $hgUW1$usePopper} from "react-popper";
@@ -1385,7 +1389,6 @@ const $1d3d480a9cfaabe0$var$useDatastore = (resourceId, rootAPIUrl, options, add
             "datastore" + id + additionalParamsString
         ],
         queryFn: ()=>{
-            setCount(null);
             return fetch(`${rootUrl}/datastore/query/${id}?${additionalParamsString}`).then((res)=>res.json());
         },
         enabled: enabled
@@ -1685,7 +1688,7 @@ const $64a351d3fd8413c3$var$HeaderResizeElement = ({ table: table, header: heade
                         style: {
                             maxWidth: header.getSize() - 16
                         },
-                        title: header.column.columnDef.header,
+                        title: typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "",
                         children: header.isPlaceholder ? null : (0, $hgUW1$flexRender)(header.column.columnDef.header, header.getContext())
                     }),
                     sortElement && /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
@@ -1806,7 +1809,334 @@ var $23763e27eda0e8d7$export$2e2bcd8739ae039 = $23763e27eda0e8d7$var$FixedSizeTH
 
 
 
-const $d98f94c79ddf4e0e$var$DataTable = ({ data: data, columns: columns, setSort: setSort, sortTransform: sortTransform, tablePadding: tablePadding, canResize: canResize, loading: loading = false })=>{
+
+
+
+
+
+
+
+
+
+
+
+const $5fe94aeb50e0798b$var$Card = ({ id: id, visible: visible, updateVisibility: updateVisibility })=>{
+    const { attributes: attributes, listeners: listeners, setNodeRef: setNodeRef, transform: transform, transition: transition, isDragging: isDragging } = (0, $hgUW1$useSortable)({
+        id: id
+    });
+    const style = {
+        transform: (0, $hgUW1$CSS).Transform.toString(transform),
+        transition: transition,
+        opacity: isDragging ? 0.7 : 1,
+        zIndex: isDragging ? 1 : 0,
+        position: "relative",
+        background: "white",
+        touchAction: "none"
+    };
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)("li", {
+        className: "ds-u-display--flex ds-u-justify-content--between ds-u-border-bottom--1",
+        ref: setNodeRef,
+        style: style,
+        ...listeners,
+        ...attributes,
+        onPointerUp: (e)=>{
+            // Small hack to get around a chrome / webkit rendering bug = force chrome to repaint the checkbox
+            // For whatever reason the way dnd-kit handles events doesn't work well with chrome
+            // Without this code checkboxes can end up visually out of sync with app state until a repaint is forced
+            // this code forces the repaint without user interaction
+            const target = e.target;
+            if (isDragging && target.tagName.toLowerCase() === "label") setTimeout(()=>{
+                target.parentNode.querySelector("input").checked = visible;
+            }, 1);
+        },
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Choice), {
+                type: "checkbox",
+                label: id,
+                name: id + "_visibility",
+                checked: visible,
+                className: "ds-l-col--10 ds-u-margin-top--0 ds-u-margin-y--1 ds-u-padding-x--3",
+                labelClassName: "dc-truncate",
+                title: "Toggle Column Visible",
+                value: "",
+                onChange: ()=>{
+                    updateVisibility(id, !visible);
+                }
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsx)("button", {
+                className: `ds-l-col--2 dkan-manage-columns-reorder-button ${isDragging && "grabbed"}`,
+                "aria-label": `Reorder ${id} column`,
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                    className: "fa fa-sort"
+                })
+            })
+        ]
+    });
+};
+var $5fe94aeb50e0798b$export$2e2bcd8739ae039 = $5fe94aeb50e0798b$var$Card;
+
+
+
+class $5d9e2ce238d53d29$var$ExcludeCheckboxKeyboardSensor extends (0, $hgUW1$KeyboardSensor) {
+    // Custom function to exclude checkbox from keyboard dragging
+    static activators = [
+        {
+            eventName: "onKeyDown",
+            handler: ({ nativeEvent: event })=>{
+                // prevent scrolling the list
+                const isCheckbox = [
+                    "input",
+                    "checkbox"
+                ].indexOf(event.target.tagName.toLowerCase()) !== -1;
+                if (event.key === " " && !isCheckbox) event.preventDefault();
+                // only activate on a space or return press
+                if ([
+                    " ",
+                    "Enter"
+                ].indexOf(event.key) === -1) return false;
+                if (!isCheckbox) return true;
+                return false;
+            }
+        }
+    ];
+}
+class $5d9e2ce238d53d29$var$ExcludeCheckboxPointerSensor extends (0, $hgUW1$PointerSensor) {
+    // Custom function to stop accidental checkbox clicks on pointer activation
+    static activators = [
+        {
+            eventName: "onPointerDown",
+            handler: ({ nativeEvent: event })=>{
+                if (event.target.tagName.toLowerCase() === "input") return false;
+                if (event.target.tagName.toLowerCase() === "label") event.target.blur();
+                return true;
+            }
+        }
+    ];
+}
+const $5d9e2ce238d53d29$var$ManageColumns = ({ id: id, columns: columns, defaultColumnOrder: defaultColumnOrder, setColumnOrder: setColumnOrder, setColumnVisibility: setColumnVisibility })=>{
+    const [modalOpen, setModalOpen] = (0, $hgUW1$useState)(false);
+    const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)();
+    // maintain card state separately from table state - only sync states when the Save button is pressed
+    const [cards, setCards] = (0, $hgUW1$useState)(columns.map((c)=>{
+        return {
+            id: c.id,
+            visible: c.getIsVisible()
+        };
+    }));
+    const cardOrder = (0, $hgUW1$useMemo)(()=>cards.map(({ id: id })=>id), [
+        cards
+    ]);
+    const sensors = (0, $hgUW1$useSensors)((0, $hgUW1$useSensor)($5d9e2ce238d53d29$var$ExcludeCheckboxPointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), (0, $hgUW1$useSensor)($5d9e2ce238d53d29$var$ExcludeCheckboxKeyboardSensor, {
+        coordinateGetter: (0, $hgUW1$sortableKeyboardCoordinates)
+    }));
+    const hiddenColumns = columns.filter((c)=>c.getIsVisible() === false).length;
+    const cardHiddenColumns = cards.filter((c)=>c.visible === false).length;
+    const updateVisibility = (0, $hgUW1$useCallback)((id, newVisibility)=>{
+        setCards(cards.map((card)=>{
+            if (card.id === id) return {
+                ...card,
+                visible: newVisibility
+            };
+            return card;
+        }));
+    });
+    function handleDragEnd(e) {
+        const { active: active, over: over } = e;
+        if (active.id !== over.id) {
+            const oldIndex = cardOrder.indexOf(active.id);
+            const newIndex = cardOrder.indexOf(over.id);
+            let newCards = (0, $hgUW1$arrayMove)(cards, oldIndex, newIndex);
+            setCards(newCards);
+        }
+    }
+    const resetCards = ()=>{
+        setCards(columns.map((c)=>{
+            return {
+                id: c.id,
+                visible: c.getIsVisible()
+            };
+        }));
+    };
+    return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                className: "ds-u-border-top--1 ds-u-fill--gray-lightest ds-u-display--flex ds-u-justify-content--between",
+                children: [
+                    /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                        children: hiddenColumns > 0 && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Alert), {
+                            variation: "warn",
+                            children: [
+                                hiddenColumns,
+                                " Columns Hidden"
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $hgUW1$jsxs)("button", {
+                        "aria-label": "Manage columns - Opens in a dialog",
+                        icon: "columns",
+                        text: "Manage columns",
+                        className: "ds-c-button ds-c-button--ghost ds-u-margin-y--1",
+                        onClick: ()=>{
+                            setModalOpen(true);
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, $hgUW1$jsx)("i", {
+                                className: "far fa-cog ds-u-margin-right--1"
+                            }),
+                            "Manage Columns"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                className: `ds-c-dialog-wrap${modalOpen ? " open" : ""}`,
+                children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Dialog), {
+                    heading: "Manage columns",
+                    isOpen: modalOpen,
+                    onExit: ()=>{
+                        setModalOpen(false);
+                        resetCards();
+                    },
+                    className: "dkan-manage-columns-dialog",
+                    actions: /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                        className: "ds-u-display--flex ds-u-justify-content--between ds-u-flex-wrap--wrap ds-u-padding-x--3 ds-u-padding-bottom--1 ds-u-sm-padding-bottom--3",
+                        children: [
+                            /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                                className: "ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0",
+                                children: [
+                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                        variation: "solid",
+                                        className: "ds-l-col--6 ds-l-sm-col--auto",
+                                        onClick: ()=>{
+                                            setModalOpen(false);
+                                            // update table state
+                                            // Visibility
+                                            // This code is building a new columnVisibility state object from the card state and doing a single setState on the table
+                                            // vs doing a setState on every changed column individually
+                                            const newColumnVisibility = Object.fromEntries(cards.map((c)=>Object.values(c)));
+                                            setColumnVisibility(newColumnVisibility);
+                                            // Card order
+                                            const newCardOrder = cards.map((c)=>{
+                                                return c.id;
+                                            });
+                                            setColumnOrder(newCardOrder);
+                                            // save to localStorage
+                                            const localStorageData = {
+                                                tableColumnOrder: newCardOrder,
+                                                tableColumnVisibility: newColumnVisibility
+                                            };
+                                            localStorage.setItem(id, JSON.stringify(localStorageData));
+                                        },
+                                        children: "Save"
+                                    }),
+                                    /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                        variation: "ghost",
+                                        className: "ds-l-col--6 ds-l-sm-col--auto",
+                                        onClick: ()=>{
+                                            setModalOpen(false);
+                                            resetCards();
+                                        },
+                                        children: "Cancel"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                                className: "ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-padding-top--1 ds-u-sm-padding-y--0",
+                                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
+                                    variation: "ghost",
+                                    className: "ds-l-col--6 ds-l-sm-col--auto",
+                                    onClick: ()=>{
+                                        // reset to default column order and set all cards to visible
+                                        // do not save this to the table state until the "Save" button is clicked
+                                        setCards(defaultColumnOrder.map((column)=>{
+                                            const card = cards.filter((c)=>c.id === column)[0];
+                                            return {
+                                                ...card,
+                                                visible: true
+                                            };
+                                        }));
+                                    },
+                                    children: "Reset Columns"
+                                })
+                            })
+                        ]
+                    }),
+                    children: [
+                        /*#__PURE__*/ (0, $hgUW1$jsx)("p", {
+                            id: "reorder-help",
+                            className: "ds-u-padding-x--3",
+                            children: "Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering."
+                        }),
+                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Choice), {
+                            checked: cardHiddenColumns === 0,
+                            type: "checkbox",
+                            onChange: ()=>{
+                                setCards(cards.map((c)=>{
+                                    return {
+                                        ...c,
+                                        visible: cardHiddenColumns !== 0
+                                    };
+                                }));
+                            },
+                            className: "ds-u-padding-x--3",
+                            name: "",
+                            value: "",
+                            label: "Select all",
+                            hint: cardHiddenColumns && cardHiddenColumns + " columns hidden"
+                        }),
+                        /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
+                            className: "ds-u-display--flex ds-u-justify-content--between ds-u-font-weight--bold ds-u-padding-y--2 ds-u-padding-x--3 ds-u-border-y--1 ds-u-margin-top--2",
+                            children: [
+                                /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                                    children: "Display column"
+                                }),
+                                /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
+                                    children: "Reorder"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$DndContext), {
+                            collisionDetection: (0, $hgUW1$closestCenter),
+                            modifiers: [
+                                (0, $hgUW1$restrictToVerticalAxis)
+                            ],
+                            sensors: sensors,
+                            onDragEnd: handleDragEnd,
+                            children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$SortableContext), {
+                                items: cardOrder,
+                                strategy: (0, $hgUW1$verticalListSortingStrategy),
+                                children: /*#__PURE__*/ (0, $hgUW1$jsx)("ul", {
+                                    className: "dkan-manage-columns-list",
+                                    children: cards.map((card)=>{
+                                        return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $5fe94aeb50e0798b$export$2e2bcd8739ae039), {
+                                            id: card.id,
+                                            visible: card.visible,
+                                            updateVisibility: updateVisibility
+                                        }, card.id);
+                                    })
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                            className: "sr-only aria-live-feedback",
+                            "aria-live": "assertive",
+                            "aria-atomic": "true",
+                            children: ariaLiveFeedback
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+var $5d9e2ce238d53d29$export$2e2bcd8739ae039 = $5d9e2ce238d53d29$var$ManageColumns;
+
+
+const $d98f94c79ddf4e0e$var$DataTable = ({ id: id, data: data, columns: columns, setSort: setSort, sortTransform: sortTransform, tablePadding: tablePadding, canResize: canResize, loading: loading = false, manageColumnsEnabled: manageColumnsEnabled })=>{
     const [sorting, setSorting] = (0, $hgUW1$react).useState([]);
     const [ariaLiveFeedback, setAriaLiveFeedback] = (0, $hgUW1$useState)("");
     const columnHelper = (0, $hgUW1$createColumnHelper)();
@@ -1819,6 +2149,15 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ data: data, columns: columns, setSort
             header: col.header
         });
     });
+    const localStorageData = JSON.parse(localStorage.getItem(id));
+    const [columnOrder, setColumnOrder] = (0, $hgUW1$useState)(()=>{
+        if (manageColumnsEnabled && localStorageData) return localStorageData.tablecolumnOrder;
+        else return table_columns.map((c)=>c.accessorKey);
+    });
+    const [columnVisibility, setColumnVisibility] = (0, $hgUW1$useState)(()=>{
+        if (manageColumnsEnabled && localStorageData) return localStorageData.tableColumnVisibility;
+        else return {};
+    });
     const sortElement = (isSorted, onClickFn)=>{
         if (isSorted === "asc") return "dc-c-sort--asc";
         if (isSorted === "desc") return "dc-c-sort--desc";
@@ -1830,10 +2169,14 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ data: data, columns: columns, setSort
         columns: table_columns,
         manualSorting: true,
         state: {
+            columnOrder: columnOrder,
+            columnVisibility: columnVisibility,
             sorting: sorting
         },
         columnResizeMode: "onChange",
         onSortingChange: setSorting,
+        onColumnOrderChange: setColumnOrder,
+        onColumnVisibilityChange: setColumnVisibility,
         getCoreRowModel: (0, $hgUW1$getCoreRowModel)(),
         getSortedRowModel: (0, $hgUW1$getSortedRowModel)(),
         debugTable: false
@@ -1844,8 +2187,21 @@ const $d98f94c79ddf4e0e$var$DataTable = ({ data: data, columns: columns, setSort
     }, [
         sorting
     ]);
+    const defaultColumnOrder = (0, $hgUW1$useMemo)(()=>table_columns.map((column)=>{
+            return column.accessorKey;
+        }));
     return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Fragment), {
         children: [
+            manageColumnsEnabled && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+                children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $5d9e2ce238d53d29$export$2e2bcd8739ae039), {
+                    id: id,
+                    columns: table.getAllLeafColumns(),
+                    columnOrder: columnOrder,
+                    defaultColumnOrder: defaultColumnOrder,
+                    setColumnOrder: setColumnOrder,
+                    setColumnVisibility: setColumnVisibility
+                })
+            }),
             /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
                 className: "dc-c-datatable-wrapper",
                 tabIndex: 0,
@@ -2668,7 +3024,7 @@ function $a35cf16d1488f54e$export$1147582dfae658c6(columns, schema) {
             accessor: column
         }));
 }
-const $a35cf16d1488f54e$var$DatasetTable = ({ id: id, distribution: distribution, resource: resource, rootUrl: rootUrl, customColumns: customColumns = [], jsonUrl: jsonUrl, dataDictionaryBanner: dataDictionaryBanner })=>{
+const $a35cf16d1488f54e$var$DatasetTable = ({ id: id, distribution: distribution, resource: resource, rootUrl: rootUrl, customColumns: customColumns = [], jsonUrl: jsonUrl, dataDictionaryBanner: dataDictionaryBanner, manageColumnsEnabled: manageColumnsEnabled })=>{
     const defaultPage = 1;
     const defaultPageSize = 10;
     const [page, setPage] = (0, $hgUW1$useState)(defaultPage);
@@ -2703,13 +3059,15 @@ const $a35cf16d1488f54e$var$DatasetTable = ({ id: id, distribution: distribution
             /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
                 className: "ds-u-border-x--1 ds-u-border-bottom--1",
                 children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $d98f94c79ddf4e0e$export$2e2bcd8739ae039), {
+                    id: id,
                     data: resource.values,
                     canResize: true,
                     columns: columns,
                     setSort: resource.setSort,
                     sortTransform: (0, $aa4450dcbeef3ac0$export$385a5aba38cc3325),
                     tablePadding: "ds-u-padding-y--2",
-                    loading: resource.loading
+                    loading: resource.loading,
+                    manageColumnsEnabled: manageColumnsEnabled
                 })
             }),
             !resource.loading && /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
@@ -3537,7 +3895,7 @@ const $a0f13962e513caa1$var$getDataDictionary = (dataDictionaryUrl, additionalPa
         dataDictionaryLoading: isPending
     };
 };
-const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalParams: additionalParams, customColumns: customColumns, setDatasetTitle: setDatasetTitle, customMetadataMapping: customMetadataMapping, apiPageUrl: apiPageUrl = "/api", dataDictionaryUrl: dataDictionaryUrl, borderlessTabs: borderlessTabs = false, defaultPageSize: defaultPageSize = 25, dataDictionaryCSV: dataDictionaryCSV = false, dataDictionaryBanner: dataDictionaryBanner = false })=>{
+const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalParams: additionalParams, customColumns: customColumns, setDatasetTitle: setDatasetTitle, customMetadataMapping: customMetadataMapping, apiPageUrl: apiPageUrl = "/api", dataDictionaryUrl: dataDictionaryUrl, borderlessTabs: borderlessTabs = false, defaultPageSize: defaultPageSize = 25, dataDictionaryCSV: dataDictionaryCSV = false, dataDictionaryBanner: dataDictionaryBanner = false, manageColumnsEnabled: manageColumnsEnabled = false })=>{
     const options = location.search ? {
         ...(0, $hgUW1$qs).parse(location.search, {
             ignoreQueryPrefix: true
@@ -3693,7 +4051,8 @@ const $a0f13962e513caa1$var$Dataset = ({ id: id, rootUrl: rootUrl, additionalPar
                                         resource: resource,
                                         rootUrl: rootUrl,
                                         customColumns: customColumns,
-                                        dataDictionaryBanner: dataDictionaryBanner && displayDataDictionaryTab
+                                        dataDictionaryBanner: dataDictionaryBanner && displayDataDictionaryTab,
+                                        manageColumnsEnabled: manageColumnsEnabled
                                     })
                                 }),
                                 /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$TabPanel), {
@@ -5126,19 +5485,6 @@ var $1e012d1e3b534af0$export$2e2bcd8739ae039 = $1e012d1e3b534af0$var$DataTableDe
 
 
 
-const $e71aee394fdad8bd$var$ManageColumns = ()=>{
-    const [modalOpen, setModalOpen] = (0, $hgUW1$useState)(false);
-    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Button), {
-        onClick: ()=>setModalOpen(!modalOpen),
-        children: "Manage Columns"
-    });
-};
-var $e71aee394fdad8bd$export$2e2bcd8739ae039 = $e71aee394fdad8bd$var$ManageColumns;
-
-
-
-
-
 
 const $7848c69a021266f7$var$DataTableRowChanger = (props)=>{
     const { limit: limit, rowOptions: rowOptions, setLimit: setLimit } = props;