@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
JavaScript
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 };