fuse-importer 0.25.1 → 0.25.3

package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js

@@ -71,9 +71,14 @@ var ImporterDropzone = function () {
                     return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
                 };
                 var fileData = getDataFromFile(results);
-                var headersCount = fileData[0].length;
+                var filteredArray = fileData
+                    .map(function (subArray) {
+                    return subArray.filter(function (value) { return value || value === 0 || value === false; });
+                })
+                    .filter(function (subArray) { return subArray.length > 0; });
+                var headersCount = filteredArray[0].length;
                 if (validHeadersCount(headersCount)) {
-                    setUploadedData(fileData);
+                    setUploadedData(filteredArray);
                 }
                 setIsUploading(false);
             };

package/lib/esm/Importer/common/Spreadsheet/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const SpreadSheetData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
 export declare const SpreadSheetWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
-export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;

package/lib/esm/Importer/contexts/ImporterContextProvider.js

@@ -80,10 +80,12 @@ export var ImporterContextProvider = function (_a) {
         apiToken,
     ]);
     var uploadedDataHeaders = useMemo(function () {
-        return uploadedData &&
-            uploadedData[0].map(function (ud) {
-                return typeof ud === "number" ? ud.toString() : ud;
-            });
+        var _a;
+        var initialParsing = (_a = uploadedData === null || uploadedData === void 0 ? void 0 : uploadedData[0]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
+            return typeof ud === "number" ? ud.toString() : ud;
+        });
+        var onlyValidValues = initialParsing === null || initialParsing === void 0 ? void 0 : initialParsing.filter(function (val) { return val; });
+        return (onlyValidValues === null || onlyValidValues === void 0 ? void 0 : onlyValidValues.length) ? onlyValidValues : [];
     }, [uploadedData]);
     useEffect(function () {
         if (!templateHeaderMatchings)
@@ -120,7 +122,7 @@ export var ImporterContextProvider = function (_a) {
     };
     useEffect(function () {
         (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, error_1, errorMsg;
+            var _a, organization_1, columns, importer_style_preferences, integrations_1, preview_first_time, columnsOrderedByPosition, error_1, errorMsg;
             var _b, _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -129,8 +131,9 @@ export var ImporterContextProvider = function (_a) {
                         return [4 /*yield*/, fuseApi.get("/api/v1/importer/templates/".concat(templateSlug))];
                     case 1:
                         _a = (_d.sent()).data, organization_1 = _a.organization, columns = _a.columns, importer_style_preferences = _a.importer_style_preferences, integrations_1 = _a.integrations, preview_first_time = _a.preview_first_time;
+                        columnsOrderedByPosition = columns.sort(function (a, b) { return a.position - b.position; });
                         setOrganization(organization_1);
-                        setTemplateHeaders(columns);
+                        setTemplateHeaders(columnsOrderedByPosition);
                         setIntegrations(integrations_1);
                         setPreviewFirstTime(preview_first_time);
                         if (organization_1.plan && organization_1.plan.allow_style_customization) {

package/lib/esm/common/Table/TableDataProvider.js

@@ -63,7 +63,7 @@ export var TableDataProvider = function (_a) {
     var _j = useState(null), totalPages = _j[0], setTotalPages = _j[1];
     var _k = useState(defaultSortBy), sortBy = _k[0], setSortBy = _k[1];
     var _l = useState(0), totalCount = _l[0], setTotalCount = _l[1];
-    var _m = useState(7), pageSize = _m[0], setPageSize = _m[1];
+    var _m = useState(50), pageSize = _m[0], setPageSize = _m[1];
     var getData = function () { return __awaiter(void 0, void 0, void 0, function () {
         var payload, e_1;
         var _a, _b, _c;

package/lib/esm/common/Table/TableView/TableCells.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Cell: React.MemoExoticComponent<any>;
+declare const DraggableCell: React.MemoExoticComponent<any>;
+export { Cell, DraggableCell };

package/lib/esm/common/Table/TableView/TableCells.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { Div } from "../../../styled/utils";
+import { TableRow } from "./TableRow";
+import React from "react";
+import { areEqual } from "react-window";
+var Cell = React.memo(function (_a) {
+    var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
+    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
+    var item = items[rowIndex];
+    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
+}, areEqual);
+var DraggableCell = React.memo(function (_a) {
+    var data = _a.data, rowIndex = _a.rowIndex, baseStyle = _a.style;
+    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
+    var item = items[rowIndex];
+    var _b = useSortable({
+        id: item.id,
+    }), listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform;
+    var dragAndDropStyles = {
+        transform: CSS.Transform.toString(transform),
+    };
+    var dragAndDropHandler = __assign({}, listeners);
+    item.dragAndDropHandler = dragAndDropHandler;
+    return (_jsx(Div, __assign({ style: __assign(__assign({}, baseStyle), dragAndDropStyles), ref: setNodeRef }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
+}, areEqual);
+export { Cell, DraggableCell };

package/lib/esm/common/Table/TableView/index.d.ts

@@ -37,5 +37,6 @@ export type TableViewProps = {
     onTableScroll?: (scrollTop: number) => void;
     onRowClick?: (row: any) => void;
     getItemKey?: (row: any) => string;
+    shouldBeDraggable?: boolean;
 } & DivCSSProps;
-export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, ...props }: TableViewProps) => JSX.Element>;
+export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, ...props }: TableViewProps) => JSX.Element>;

package/lib/esm/common/Table/TableView/index.js

@@ -24,16 +24,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useMemo, useCallback } from "react";
 import { FixedSizeGrid as Grid, areEqual } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import styled, { css } from "styled-components";
+import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { Div } from "../../../styled/utils";
 import { Spinner } from "../../Spinner";
 import { defaultTableRowHeightPx, defaultTableHeaderHeightPx } from "./common";
 import { TableHeaders } from "./TableHeaders";
-import { TableRow } from "./TableRow";
+import { Cell, DraggableCell } from "./TableCells";
 export * from "./common";
 export * from "./TableHeaders";
 export * from "./TableRow";
@@ -56,14 +57,8 @@ var buildGridStyles = function (rowWidth) {
         gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
     return gridStyles;
 };
-var Cell = React.memo(function (_a) {
-    var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
-    var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
-    var item = items[rowIndex];
-    return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
-}, areEqual);
 export var TableView = React.memo(function (_a) {
-    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey"]);
+    var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable"]);
     /*
     multiply the rowWidth by 0.95 to let the user know they can scroll
     horizontally (will display partial column on the right)
@@ -104,7 +99,7 @@ export var TableView = React.memo(function (_a) {
     }); }, [data, onRowClick, columns, highlightFirstRow, rowHeight]);
     return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
                     var width = _a.width, height = _a.height;
-                    return (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })));
+                    return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
                 } })] })));
 }, areEqual);
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/common/Table/index.d.ts

@@ -3,7 +3,9 @@ type Props = {
     blankState?: JSX.Element | null;
     columns: any[];
     onRowClick?: (row: any) => void;
+    templateSlug?: string;
+    shouldBeDraggable?: boolean;
 } & DivCSSProps;
-declare const Table: ({ columns, onRowClick, blankState, ...props }: Props) => JSX.Element;
+declare const Table: ({ columns, onRowClick, blankState, templateSlug, shouldBeDraggable, ...props }: Props) => JSX.Element;
 export { Table };
 export * from "./TableDataProvider";

package/lib/esm/common/Table/index.js

@@ -13,6 +13,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -26,19 +62,74 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
+import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, closestCenter, } from "@dnd-kit/core";
+import { restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { Div } from "../../styled/utils";
 import { Pagination } from "./Pagination";
 import { useTableContext } from "./TableDataProvider";
 import { TableView as TableViewBase } from "./TableView";
+import { useReorderRows } from "./useReorderRows";
+import { addToast } from "../../common/Toast";
 var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
     return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: 0px;\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n    "], ["\n      border-radius: 0px;\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n    "])));
 });
 var Table = function (_a) {
-    var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, props = __rest(_a, ["columns", "onRowClick", "blankState"]);
-    var _d = useTableContext(), data = _d.data, isLoading = _d.isLoading, sortBy = _d.sortBy, setSortBy = _d.setSortBy, totalPages = _d.totalPages;
+    var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.shouldBeDraggable, shouldBeDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "shouldBeDraggable"]);
+    var _e = useTableContext(), data = _e.data, isLoading = _e.isLoading, sortBy = _e.sortBy, setSortBy = _e.setSortBy, totalPages = _e.totalPages;
+    var reorderRows = useReorderRows(templateSlug).reorderRows;
     var withPagination = data.length > 0 && totalPages > 1;
+    var sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}) }))) }));
-    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination }, { isLoading: isLoading, data: data, columns: columns, sortBy: sortBy, setSortBy: setSortBy, onRowClick: onRowClick }))) : (blankState), paginationUI] })));
+    var handleDragEnd = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var active, over, overIndex, overIndexIsFalsyButNotZero, error_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    active = event.active, over = event.over;
+                    overIndex = (_c = (_b = (_a = over === null || over === void 0 ? void 0 : over.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
+                    overIndexIsFalsyButNotZero = !overIndex && overIndex !== 0;
+                    if (!(active === null || active === void 0 ? void 0 : active.id) || overIndexIsFalsyButNotZero || active.id === over.id) {
+                        return [2 /*return*/];
+                    }
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, reorderRows(active.id, overIndex + 1)];
+                case 2:
+                    _d.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _d.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var dndContextValues = {
+        sensors: shouldBeDraggable ? sensors : undefined,
+        collisionDetection: shouldBeDraggable ? closestCenter : undefined,
+        onDragEnd: shouldBeDraggable ? handleDragEnd : undefined,
+        modifiers: shouldBeDraggable
+            ? [restrictToVerticalAxis, restrictToWindowEdges]
+            : undefined,
+    };
+    return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, shouldBeDraggable: shouldBeDraggable }, {
+                    isLoading: isLoading,
+                    data: data,
+                    columns: columns,
+                    sortBy: sortBy,
+                    setSortBy: setSortBy,
+                    onRowClick: onRowClick,
+                })) }))) : (blankState), paginationUI] })));
 };
 export { Table };
 export * from "./TableDataProvider";

package/lib/esm/common/Table/useReorderRows.d.ts

@@ -0,0 +1,4 @@
+import { UniqueIdentifier } from "@dnd-kit/core";
+export declare const useReorderRows: (templateSlug: string, customMessage?: string | JSX.Element) => {
+    reorderRows: (columnId: UniqueIdentifier, position: number) => Promise<void>;
+};

package/lib/esm/common/Table/useReorderRows.js

@@ -0,0 +1,83 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addToast } from "..";
+import { api } from "../../api";
+import { Div } from "../../styled/utils";
+import { useTableContext } from "./TableDataProvider";
+export var useReorderRows = function (templateSlug, customMessage) {
+    var getData = useTableContext().getData;
+    var reorderRows = function (columnId, position) { return __awaiter(void 0, void 0, void 0, function () {
+        var apiUrl, defaultMessage, confirmationMessage, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    apiUrl = "/api/v1/templates/".concat(templateSlug, "/columns/").concat(columnId);
+                    defaultMessage = (_jsx(Div, __assign({ alignCenter: true }, { children: _jsx(Div, { children: "Columns reordered successfully" }) })));
+                    confirmationMessage = (_jsx(Div, __assign({ spaceBetween: true, alignCenter: true }, { children: customMessage || defaultMessage })));
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, api.patch(apiUrl, {
+                            position: position,
+                        })];
+                case 2:
+                    _a.sent();
+                    addToast(confirmationMessage, "success");
+                    getData();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return { reorderRows: reorderRows };
+};

package/lib/esm/types.d.ts

@@ -86,6 +86,7 @@ export type TemplateHeader = {
     values: string[];
     pattern: string;
     validations: FieldValidation[];
+    position: number;
 };
 export type Organization = {
     id: number;