@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/serverData/needsServerData.js

@@ -0,0 +1,20 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// Server mode loads for `data: { mode: server, ... }` (normalizeServerData validates it).
+function needsServerData({ properties }) {
+    return type.isObject(properties.data);
+}
+export default needsServerData;

package/dist/features/serverData/normalizeServerData.js

@@ -0,0 +1,41 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+const DEFAULT_BLOCK_SIZE = 200;
+const DEFAULT_MAX_BLOCKS = 20;
+// `data: { mode: 'server', request, blockSize, maxBlocks }`, or null for client rows.
+function normalizeServerData(data) {
+    if (!type.isObject(data)) return null;
+    if (data.mode !== 'server') {
+        throw new Error(`Table "data" must be a list of rows or { mode: server, request }. Received ${JSON.stringify(data)}.`);
+    }
+    if (!type.isString(data.request)) {
+        throw new Error(`Table server data requires "request", the id of a request on the page. Received ${JSON.stringify(data.request)}.`);
+    }
+    const blockSize = data.blockSize ?? DEFAULT_BLOCK_SIZE;
+    if (!type.isInt(blockSize) || blockSize < 1) {
+        throw new Error(`Table "data.blockSize" must be a positive integer. Received ${JSON.stringify(blockSize)}.`);
+    }
+    const maxBlocks = data.maxBlocks ?? DEFAULT_MAX_BLOCKS;
+    if (!type.isInt(maxBlocks) || maxBlocks < 2) {
+        throw new Error(`Table "data.maxBlocks" must be an integer of at least 2. Received ${JSON.stringify(maxBlocks)}.`);
+    }
+    return {
+        request: data.request,
+        blockSize,
+        maxBlocks
+    };
+}
+export default normalizeServerData;

package/dist/features/serverData/pickServerView.js

@@ -0,0 +1,43 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+import resolveAggregates from '../grouping/resolveAggregates.js';
+const EMPTY_VIEW = {
+    sort: [],
+    filter: null,
+    search: null,
+    group: [],
+    aggregates: {}
+};
+// The parts of the view the server request reads (D9). The rest (columns, density, ...) never
+// changes what the server returns, so it never refetches. `aggregates` is the aggregates in
+// effect (the view's over each column's `aggregate` default, without the ones turned off), the
+// ones the group rows and summary show.
+function pickServerView({ view, columns }) {
+    return {
+        sort: type.isArray(view.sort) ? view.sort : EMPTY_VIEW.sort,
+        filter: view.filter ?? EMPTY_VIEW.filter,
+        search: type.isString(view.search) && view.search !== '' ? view.search : EMPTY_VIEW.search,
+        group: type.isArray(view.group) ? view.group : EMPTY_VIEW.group,
+        aggregates: Object.fromEntries(resolveAggregates({
+            columns,
+            aggregates: type.isObject(view.aggregates) ? view.aggregates : EMPTY_VIEW.aggregates
+        }).map(({ key, fn })=>[
+                key,
+                fn
+            ]))
+    };
+}
+export default pickServerView;

package/dist/features/serverData/readFetchResult.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// The `__tableFetch` event result: the Request action's response for the table's request. The
+// entries of a list are its groups at a group level and its rows at the leaf level.
+function readFetchResult({ result, isGroupLevel }) {
+    const response = result?.responses?.__tableFetch?.response?.[0];
+    if (!type.isObject(response) || !type.isInt(response.total) || !type.isArray(response.rows)) {
+        throw new Error(`Table server request must return { rows, total }. Received ${JSON.stringify(response)}.`);
+    }
+    let entries = response.rows;
+    if (isGroupLevel) {
+        if (!type.isArray(response.groups)) {
+            throw new Error(`Table server request must return "groups" when the view is grouped. Received ${JSON.stringify(response)}.`);
+        }
+        entries = response.groups;
+    }
+    return {
+        entries,
+        total: response.total,
+        aggregates: response.aggregates ?? null
+    };
+}
+export default readFetchResult;

package/dist/features/serverData/serverData.css

@@ -0,0 +1,21 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@layer components {
+  .lf-table-body .lf-table-row[data-skeleton] {
+    pointer-events: none;
+  }
+}

package/dist/features/serverData/serverDataFeature.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createRefresh from './createRefresh.js';
+import useServerData from './useServerData.js';
+import useServerItems from './useServerItems.js';
+import useServerView from './useServerView.js';
+import './serverData.css';
+// Server mode (`data: { mode: server, request, blockSize }`, D9): sorting, filtering and grouping
+// only change the view; rows come from the request, in cached blocks. See createServerStore.
+// Server groups are grouping's group items: the grouping feature renders them, and its toggle
+// opens and closes them in the store.
+const serverDataFeature = {
+    name: 'serverData',
+    tableOptions: ({ config })=>config.server ? {
+            manualSorting: true,
+            manualFiltering: true,
+            manualGrouping: true
+        } : {},
+    useData: useServerData,
+    useFeature: useServerView,
+    useItems: useServerItems,
+    methods: {
+        refresh: createRefresh
+    }
+};
+export default serverDataFeature;

package/dist/features/serverData/serverRangeFeature.js

@@ -0,0 +1,22 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import useServerRange from './useServerRange.js';
+// The grid-level half of server mode, after virtualisation in the registry so it reads the
+// rendered range.
+const serverRangeFeature = {
+    name: 'serverRange',
+    useGridFeature: useServerRange
+};
+export default serverRangeFeature;

package/dist/features/serverData/useServerData.js

@@ -0,0 +1,48 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect, useRef, useState } from 'react';
+import createServerStore from './createServerStore.js';
+// In server mode the rows TanStack sees are the loaded rows of the block cache (for selection,
+// row lookup and events); the display list, with its holes for unloaded rows, comes from
+// useServerItems. One store per server config; a block landing re-renders the table.
+function useServerData({ api, config, data }) {
+    const { server } = config;
+    const storeRef = useRef(null);
+    if (server && storeRef.current?.server !== server) {
+        storeRef.current?.store.dispose();
+        storeRef.current = {
+            server,
+            store: createServerStore({
+                api,
+                server
+            })
+        };
+    }
+    const store = server ? storeRef.current.store : null;
+    api.serverStore = store;
+    // The server's count of matching rows (null until the first block lands); the record count
+    // and the bulk bar's "all matching" read it.
+    api.total = store ? store.getRecordCount() : undefined;
+    const [, setVersion] = useState(0);
+    useEffect(()=>{
+        if (!store) return undefined;
+        return store.subscribe(()=>setVersion((version)=>version + 1));
+    }, [
+        store
+    ]);
+    useEffect(()=>()=>storeRef.current?.store.dispose(), []);
+    return store ? store.getLoadedRows() : data;
+}
+export default useServerData;

package/dist/features/serverData/useServerItems.js

@@ -0,0 +1,35 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useMemo } from 'react';
+// Server mode replaces the row model with the store's display list (rows, group headers and
+// holes for rows still loading), rebuilt when a block lands or a group opens or closes.
+function useServerItems({ api, config, table }) {
+    const store = api.serverStore;
+    const { rowsById } = table.getCoreRowModel();
+    const built = useMemo(()=>store ? store.buildItems({
+            rowsById,
+            getId: config.getId
+        }) : null, [
+        store,
+        store?.version,
+        rowsById,
+        config.getId
+    ]);
+    if (!built) return null;
+    return {
+        rows: built.items
+    };
+}
+export default useServerItems;

package/dist/features/serverData/useServerRange.js

@@ -0,0 +1,35 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect } from 'react';
+// Grid-level: every change of the rendered range (or of the display list under it) goes to the
+// store, which loads the blocks behind it, at once while scrolling slowly or once the range
+// settles after a fast scroll.
+function useServerRange({ api, range, rows }) {
+    const store = api.serverStore;
+    useEffect(()=>{
+        if (!store) return;
+        store.onRange({
+            rowStart: range.rowStart,
+            rowEnd: range.rowEnd
+        });
+    }, [
+        store,
+        range.rowStart,
+        range.rowEnd,
+        rows
+    ]);
+    return null;
+}
+export default useServerRange;

package/dist/features/serverData/useServerView.js

@@ -0,0 +1,70 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect, useMemo } from 'react';
+import deriveValue from '../../core/deriveValue.js';
+import pickServerView from './pickServerView.js';
+// Watches the view (whichever feature owns sort, filter, search or group) and hands it to the
+// store, which refetches from the top when it changes. Registers the internal `__tableFetch`
+// event, a Request action for `data.request` (the pattern Upload uses for its policy request).
+function useServerView({ api, config, state }) {
+    const { server } = config;
+    const store = api.serverStore;
+    const value = useMemo(()=>server ? deriveValue({
+            state,
+            api
+        }) : null, [
+        state,
+        server
+    ]);
+    const view = value ? pickServerView({
+        view: value.view,
+        columns: config.columns
+    }) : null;
+    const viewKey = JSON.stringify(view);
+    if (store) store.selected = value.selected;
+    useEffect(()=>{
+        if (!server) return;
+        api.methods.registerEvent({
+            name: '__tableFetch',
+            actions: [
+                {
+                    id: '__tableFetch',
+                    type: 'Request',
+                    params: [
+                        server.request
+                    ]
+                }
+            ]
+        });
+    }, [
+        server
+    ]);
+    useEffect(()=>{
+        if (!store) return;
+        store.setView({
+            view,
+            viewKey
+        });
+    }, [
+        store,
+        viewKey
+    ]);
+    if (!store) return null;
+    return {
+        loading: store.isLoading(),
+        pending: store.isPending()
+    };
+}
+export default useServerView;

package/dist/features/sizing/ResizeHandle.js

@@ -0,0 +1,24 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+function ResizeHandle({ col }) {
+    if (!col.column?.resizable) return null;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-resize",
+        "data-lf-resize": "",
+        "data-col-key": col.key
+    });
+}
+export default ResizeHandle;

package/dist/features/sizing/handleResizePointerDown.js

@@ -0,0 +1,66 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Resize by CSS variables (D10.6): while the pointer moves, the layout is recomputed with the
+// dragged width and written to the root's --lf-* variables in a rAF, with zero React renders. The
+// width commits to TanStack's columnSizing (and so to the block value) once, on pointerup.
+function handleResizePointerDown(event, api) {
+    const handle = event.target.closest('[data-lf-resize]');
+    if (!handle || !api.contains(handle) || event.button !== 0) return false;
+    event.preventDefault();
+    event.stopPropagation();
+    const { colKey: key } = handle.dataset;
+    const col = api.layout.byKey.get(key);
+    const root = api.rootRef.current;
+    const startX = event.clientX;
+    const startWidth = col.width;
+    const minWidth = col.minWidth;
+    const maxWidth = col.maxWidth;
+    let width = startWidth;
+    let frame = 0;
+    root.setAttribute('data-resizing', '');
+    handle.setAttribute('data-active', '');
+    handle.setPointerCapture?.(event.pointerId);
+    function onMove(moveEvent) {
+        width = Math.round(Math.min(maxWidth, Math.max(minWidth, startWidth + moveEvent.clientX - startX)));
+        if (frame) return;
+        frame = requestAnimationFrame(()=>{
+            frame = 0;
+            api.previewLayout({
+                widths: {
+                    [key]: width
+                }
+            });
+        });
+    }
+    function onEnd() {
+        if (frame) cancelAnimationFrame(frame);
+        handle.removeEventListener('pointermove', onMove);
+        handle.removeEventListener('pointerup', onEnd);
+        handle.removeEventListener('pointercancel', onEnd);
+        root.removeAttribute('data-resizing');
+        handle.removeAttribute('data-active');
+        api.suppressClick();
+        if (width === startWidth) return;
+        api.updateSlice('columnSizing', (previous)=>({
+                ...previous,
+                [key]: width
+            }));
+    }
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onEnd);
+    handle.addEventListener('pointercancel', onEnd);
+    return true;
+}
+export default handleResizePointerDown;

package/dist/features/sizing/initColumnSizing.js

@@ -0,0 +1,23 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+function initColumnSizing({ viewColumns }) {
+    const sizing = {};
+    viewColumns.forEach((entry)=>{
+        if (type.isNumber(entry.width)) sizing[entry.key] = entry.width;
+    });
+    return sizing;
+}
+export default initColumnSizing;

package/dist/features/sizing/sizingFeature.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { columnSizingFeature } from '@tanstack/react-table';
+import handleResizePointerDown from './handleResizePointerDown.js';
+import initColumnSizing from './initColumnSizing.js';
+import ResizeHandle from './ResizeHandle.js';
+import sizingToViewColumn from './sizingToViewColumn.js';
+const sizingFeature = {
+    name: 'sizing',
+    tableFeatures: {
+        columnSizingFeature
+    },
+    slices: {
+        columnSizing: {
+            init: initColumnSizing,
+            cause: 'columns'
+        }
+    },
+    toViewColumn: sizingToViewColumn,
+    headerParts: [
+        ResizeHandle
+    ],
+    gridHandlers: {
+        pointerdown: handleResizePointerDown
+    }
+};
+export default sizingFeature;

package/dist/features/sizing/sizingToViewColumn.js

@@ -0,0 +1,24 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+// Only widths the user (or the view) set are written, so an unsized column keeps following its
+// config width.
+function sizingToViewColumn({ key, state }) {
+    const width = state.columnSizing[key];
+    return type.isNumber(width) ? {
+        width
+    } : {};
+}
+export default sizingToViewColumn;

package/dist/features/sorting/SortIndicator.js

@@ -0,0 +1,37 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+function SortIndicator({ col, state }) {
+    if (!col.column?.sortable) return null;
+    const index = state.sorting.findIndex((sort)=>sort.id === col.key);
+    const sort = state.sorting[index];
+    return /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-sort",
+        "aria-hidden": "true"
+    }, /*#__PURE__*/ React.createElement("svg", {
+        viewBox: "0 0 8 12"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M4 0 8 5H0z",
+        "data-active": sort && !sort.desc ? '' : undefined,
+        fill: "currentColor"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M4 12 0 7h8z",
+        "data-active": sort?.desc ? '' : undefined,
+        fill: "currentColor"
+    })), sort && state.sorting.length > 1 ? /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-sort-order"
+    }, index + 1) : null);
+}
+export default SortIndicator;