UNPKG

@lifespikes/next-datatable

Version:

Datatable made with Shadcn, which can support server-side pagination and can synchronize its state with the url

643 lines (633 loc) 25.7 kB
import { jsx } from 'react/jsx-runtime'; import { DataTable } from '@lifespikes/ui'; import { useQueryState, parseAsJson } from 'nuqs'; import { useTransition, useMemo } from 'react'; import { useSearchParams } from 'next/navigation'; function _array_like_to_array$5(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes$5(arr) { if (Array.isArray(arr)) return arr; } function _define_property$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _iterable_to_array_limit$5(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest$5() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _object_spread$3(target) { for(var i = 1; i < arguments.length; i++){ var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === "function") { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function(key) { _define_property$3(target, key, source[key]); }); } return target; } function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function(sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _object_spread_props$2(target, source) { source = source != null ? source : {}; if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function(key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _sliced_to_array$5(arr, i) { return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5(); } function _unsupported_iterable_to_array$5(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array$5(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen); } var useQueryDatatable = function(key, options) { var _useTransition = _sliced_to_array$5(useTransition(), 2), isLoading = _useTransition[0], startTransition = _useTransition[1]; var _useQueryState = _sliced_to_array$5(useQueryState(key, _object_spread$3(_object_spread_props$2(_object_spread$3({}, parseAsJson()), { shallow: true, history: "replace", startTransition: startTransition }), options)), 2), value = _useQueryState[0], setValue = _useQueryState[1]; return [ value, setValue, isLoading ]; }; function _array_like_to_array$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes$4(arr) { if (Array.isArray(arr)) return arr; } function _iterable_to_array_limit$4(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest$4() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _sliced_to_array$4(arr, i) { return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4(); } function _unsupported_iterable_to_array$4(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen); } var useSortingState = function(defaultState) { var _useQueryDatatable = _sliced_to_array$4(useQueryDatatable("sorting", { defaultValue: defaultState !== null && defaultState !== void 0 ? defaultState : [] }), 3), sorting = _useQueryDatatable[0], setSorting = _useQueryDatatable[1], isLoading = _useQueryDatatable[2]; return { sorting: sorting, setSorting: setSorting, isLoading: isLoading }; }; function _array_like_to_array$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes$3(arr) { if (Array.isArray(arr)) return arr; } function _define_property$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _iterable_to_array_limit$3(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest$3() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _object_spread$2(target) { for(var i = 1; i < arguments.length; i++){ var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === "function") { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function(key) { _define_property$2(target, key, source[key]); }); } return target; } function _sliced_to_array$3(arr, i) { return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3(); } function _unsupported_iterable_to_array$3(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen); } var usePaginationState = function(defaultState) { var _useQueryDatatable = _sliced_to_array$3(useQueryDatatable("pagination", { defaultValue: _object_spread$2({ pageIndex: 0, pageSize: 10 }, defaultState) }), 3), pagination = _useQueryDatatable[0], setPagination = _useQueryDatatable[1], isLoading = _useQueryDatatable[2]; return { pagination: pagination, setPagination: setPagination, isLoading: isLoading }; }; function _array_like_to_array$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes$2(arr) { if (Array.isArray(arr)) return arr; } function _iterable_to_array_limit$2(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _sliced_to_array$2(arr, i) { return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2(); } function _unsupported_iterable_to_array$2(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen); } var useColumnVisibilityState = function() { var defaultState = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}; var _useQueryDatatable = _sliced_to_array$2(useQueryDatatable("visibility", { defaultValue: defaultState }), 3), columnVisibility = _useQueryDatatable[0], setColumnVisibility = _useQueryDatatable[1], isLoading = _useQueryDatatable[2]; return { columnVisibility: columnVisibility, setColumnVisibility: setColumnVisibility, isLoading: isLoading }; }; function _array_like_to_array$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes$1(arr) { if (Array.isArray(arr)) return arr; } function _iterable_to_array_limit$1(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _sliced_to_array$1(arr, i) { return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1(); } function _unsupported_iterable_to_array$1(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen); } var useColumnFilterState = function(defaultState) { var _useQueryDatatable = _sliced_to_array$1(useQueryDatatable("filter", { defaultValue: defaultState !== null && defaultState !== void 0 ? defaultState : [] }), 3), columnFilters = _useQueryDatatable[0], setColumnFilters = _useQueryDatatable[1], isLoading = _useQueryDatatable[2]; return { columnFilters: columnFilters, setColumnFilters: setColumnFilters, isLoading: isLoading }; }; /** * Do not use this hook to get data from outside the Datatable, please use useNextTableState hook * */ var useNextTableStateInternal = function() { var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}; var _usePaginationState = usePaginationState(options.pagination), pagination = _usePaginationState.pagination, setPagination = _usePaginationState.setPagination, isLoadingPagination = _usePaginationState.isLoading; var _useSortingState = useSortingState(options.sorting), sorting = _useSortingState.sorting, setSorting = _useSortingState.setSorting, isSortingLoading = _useSortingState.isLoading; var _useColumnVisibilityState = useColumnVisibilityState(options.visibility), columnVisibility = _useColumnVisibilityState.columnVisibility, setColumnVisibility = _useColumnVisibilityState.setColumnVisibility, isColumnVisibilityLoading = _useColumnVisibilityState.isLoading; var _useColumnFilterState = useColumnFilterState(options.filter), columnFilters = _useColumnFilterState.columnFilters, setColumnFilters = _useColumnFilterState.setColumnFilters, isColumnFilterLoading = _useColumnFilterState.isLoading; var isLoading = isLoadingPagination || isSortingLoading || isColumnVisibilityLoading || isColumnFilterLoading; return { pagination: pagination, setPagination: setPagination, sorting: sorting, setSorting: setSorting, columnVisibility: columnVisibility, setColumnVisibility: setColumnVisibility, columnFilters: columnFilters, setColumnFilters: setColumnFilters, isLoading: isLoading }; }; function _define_property$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _object_spread$1(target) { for(var i = 1; i < arguments.length; i++){ var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === "function") { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function(key) { _define_property$1(target, key, source[key]); }); } return target; } function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function(sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _object_spread_props$1(target, source) { source = source != null ? source : {}; if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function(key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } var NextDataTable = function(props) { var _useNextTableStateInternal = useNextTableStateInternal(props.defaultValues), pagination = _useNextTableStateInternal.pagination, columnVisibility = _useNextTableStateInternal.columnVisibility, sorting = _useNextTableStateInternal.sorting, columnFilters = _useNextTableStateInternal.columnFilters, setPagination = _useNextTableStateInternal.setPagination, setColumnVisibility = _useNextTableStateInternal.setColumnVisibility, setSorting = _useNextTableStateInternal.setSorting, setColumnFilters = _useNextTableStateInternal.setColumnFilters, isLoading = _useNextTableStateInternal.isLoading; var _loading = props.isLoading || isLoading; return /*#__PURE__*/ jsx(DataTable, _object_spread_props$1(_object_spread$1({}, props), { tableOptions: { manualPagination: true, manualSorting: true, manualFiltering: true, pageCount: props.pageCount, state: { pagination: pagination, sorting: sorting, columnVisibility: columnVisibility, columnFilters: columnFilters }, onSortingChange: setSorting, onPaginationChange: setPagination, onColumnVisibilityChange: setColumnVisibility, onColumnFiltersChange: setColumnFilters }, isLoading: _loading })); }; function _array_like_to_array(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_with_holes(arr) { if (Array.isArray(arr)) return arr; } function _define_property(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _iterable_to_array_limit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){ _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally{ try { if (!_n && _i["return"] != null) _i["return"](); } finally{ if (_d) throw _e; } } return _arr; } function _non_iterable_rest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _object_spread(target) { for(var i = 1; i < arguments.length; i++){ var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === "function") { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function(key) { _define_property(target, key, source[key]); }); } return target; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function(sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _object_spread_props(target, source) { source = source != null ? source : {}; if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function(key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } function _sliced_to_array(arr, i) { return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest(); } function _unsupported_iterable_to_array(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen); } var mapSort = function(sort) { var firstSort = sort[0]; if (!firstSort) { return null; } return "".concat(firstSort.desc ? "-" : "").concat(firstSort.id); }; function safeParse(parser, value, key) { try { return parser(value); } catch (error) { console.warn("[nuqs] Error while parsing value `%s`: %O" + (key ? " (for key `%s`)" : ""), value, error, key); return null; } } var jsonParser = parseAsJson().parse; var parseToNumber = function(value) { var defaultValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null; if (!value) { return defaultValue; } if (isNaN(Number(value))) { return defaultValue; } return Number(value); }; /** * * Hook that allows to obtain the data used internally in the NextTable state, since having duplications of the data setting hook (_use-next-table-state) * in the url, you can have unexpected behaviors. * */ var useGetNextTableState = function() { var searchParams = useSearchParams(); var pagination = searchParams.get("pagination"); var filter = searchParams.get("filter"); var sorting = searchParams.get("sorting"); var visibility = searchParams.get("visibility"); return useMemo(function() { var _parseData_pagination, _parseData_pagination1; var parseData = Object.entries({ pagination: pagination, filter: filter, sorting: sorting, visibility: visibility }).reduce(function(acc, param) { var _param = _sliced_to_array(param, 2), key = _param[0], _$param = _param[1]; return _object_spread_props(_object_spread({}, acc), _define_property({}, key, safeParse(jsonParser, _$param !== null && _$param !== void 0 ? _$param : "", key))); }, {}); var _parseData_filter, _parseData_sorting; return { pagination: { pageSize: parseToNumber((_parseData_pagination = parseData.pagination) === null || _parseData_pagination === void 0 ? void 0 : _parseData_pagination.pageSize, null), pageIndex: parseToNumber((_parseData_pagination1 = parseData.pagination) === null || _parseData_pagination1 === void 0 ? void 0 : _parseData_pagination1.pageIndex, null) }, filter: ((_parseData_filter = parseData.filter) !== null && _parseData_filter !== void 0 ? _parseData_filter : []).reduce(function(acc, filter) { return _object_spread_props(_object_spread({}, acc), _define_property({}, filter.id, filter.value)); }, {}), sort: mapSort((_parseData_sorting = parseData.sorting) !== null && _parseData_sorting !== void 0 ? _parseData_sorting : []), visibility: visibility }; }, [ pagination, filter, sorting, visibility ]); }; export { NextDataTable, mapSort, safeParse, useColumnFilterState, useColumnVisibilityState, useGetNextTableState, useNextTableStateInternal, usePaginationState, useQueryDatatable, useSortingState };