@bsol-oss/react-datatable5 2.0.4 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +7 -5
- package/dist/index.js +13 -8
- package/dist/index.mjs +13 -8
- package/dist/types/components/DataTable/DataTableServer.d.ts +2 -2
- package/dist/types/components/DataTable/DefaultTable.d.ts +1 -1
- package/dist/types/components/DataTable/ReloadButton.d.ts +5 -0
- package/dist/types/components/DataTable/TableControls.d.ts +2 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/types/components/DataTable/TableReloadButton.d.ts +0 -4
package/dist/index.d.ts
CHANGED
|
@@ -146,6 +146,7 @@ interface DataTableServerProps<TData> {
|
|
|
146
146
|
setColumnOrder: OnChangeFn<ColumnOrderState>;
|
|
147
147
|
setDensity: OnChangeFn<DensityState>;
|
|
148
148
|
setColumnVisibility: OnChangeFn<VisibilityState>;
|
|
149
|
+
onFetchSuccess?: (response: DataResponse<TData>) => void;
|
|
149
150
|
}
|
|
150
151
|
interface Result<T> {
|
|
151
152
|
results: T[];
|
|
@@ -153,9 +154,8 @@ interface Result<T> {
|
|
|
153
154
|
interface DataResponse<T> extends Result<T> {
|
|
154
155
|
success: boolean;
|
|
155
156
|
count: number;
|
|
156
|
-
filterCount: number;
|
|
157
157
|
}
|
|
158
|
-
declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
158
|
+
declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
159
159
|
|
|
160
160
|
interface TableControlsProps {
|
|
161
161
|
totalText?: string;
|
|
@@ -166,14 +166,15 @@ interface TableControlsProps {
|
|
|
166
166
|
children?: JSX.Element;
|
|
167
167
|
showFilterName?: boolean;
|
|
168
168
|
showFilterTags?: boolean;
|
|
169
|
+
showReload?: boolean;
|
|
169
170
|
filterOptions?: string[];
|
|
170
171
|
}
|
|
171
|
-
declare const TableControls: ({ totalText, showFilter, fitTableWidth, fitTableHeight, isMobile, children, showFilterName, showFilterTags, filterOptions, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
|
|
172
|
+
declare const TableControls: ({ totalText, showFilter, fitTableWidth, fitTableHeight, isMobile, children, showFilterName, showFilterTags, showReload, filterOptions, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
|
|
172
173
|
|
|
173
174
|
interface DefaultTableProps extends TableControlsProps {
|
|
174
175
|
showFooter?: boolean;
|
|
175
176
|
}
|
|
176
|
-
declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
177
|
+
declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
177
178
|
|
|
178
179
|
interface TableProps extends TableProps$1 {
|
|
179
180
|
showLoading?: boolean;
|
|
@@ -248,8 +249,9 @@ declare const TablePagination: ({}: PaginationProps) => react_jsx_runtime.JSX.El
|
|
|
248
249
|
|
|
249
250
|
interface ReloadButtonProps {
|
|
250
251
|
text?: string;
|
|
252
|
+
variant?: string;
|
|
251
253
|
}
|
|
252
|
-
declare const ReloadButton: ({ text }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
|
|
254
|
+
declare const ReloadButton: ({ text, variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
|
|
253
255
|
|
|
254
256
|
declare const TableSelector: () => react_jsx_runtime.JSX.Element;
|
|
255
257
|
|
package/dist/index.js
CHANGED
|
@@ -297,14 +297,13 @@ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSu
|
|
|
297
297
|
return { data, loading, hasError, refreshData };
|
|
298
298
|
};
|
|
299
299
|
|
|
300
|
-
const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) => {
|
|
300
|
+
const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }) => {
|
|
301
301
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
302
302
|
url: url,
|
|
303
303
|
defaultData: {
|
|
304
304
|
success: false,
|
|
305
305
|
results: [],
|
|
306
306
|
count: 0,
|
|
307
|
-
filterCount: 0,
|
|
308
307
|
},
|
|
309
308
|
params: {
|
|
310
309
|
pagination: JSON.stringify({
|
|
@@ -322,6 +321,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
322
321
|
searching: globalFilter,
|
|
323
322
|
},
|
|
324
323
|
disableFirstFetch: true,
|
|
324
|
+
onFetchSuccess: onFetchSuccess,
|
|
325
325
|
});
|
|
326
326
|
const table = reactTable.useReactTable({
|
|
327
327
|
_features: [DensityFeature],
|
|
@@ -441,9 +441,9 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
441
441
|
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
442
442
|
};
|
|
443
443
|
|
|
444
|
-
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showFilterName = false, showFilterTags = false, filterOptions = [], }) => {
|
|
444
|
+
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], }) => {
|
|
445
445
|
const { loading, hasError } = useDataTableContext();
|
|
446
|
-
return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "
|
|
446
|
+
return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(react.Tooltip, { label: "An error occurred while fetching data", children: jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) }) })), showFilter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GlobalFilter, {}), jsxRuntime.jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })), showReload && jsxRuntime.jsx(ReloadButton, {})] })] }), jsxRuntime.jsx(react.Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
447
447
|
return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }));
|
|
448
448
|
}) }), jsxRuntime.jsx(react.Flex, { gridColumn: "1 / span 2", children: showFilterTags && jsxRuntime.jsx(TableFilterTags, {}) }), jsxRuntime.jsx(react.Box, { overflow: "auto", gridColumn: "1 / span 2", width: "100%", height: "100%", children: children }), jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [jsxRuntime.jsx(PageSizeControl, {}), jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: totalText }), jsxRuntime.jsx(RowCountText, {})] })] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: jsxRuntime.jsx(TablePagination, {}) })] }));
|
|
449
449
|
};
|
|
@@ -578,8 +578,8 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
578
578
|
})] }, crypto.randomUUID()))) }));
|
|
579
579
|
};
|
|
580
580
|
|
|
581
|
-
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, }) => {
|
|
582
|
-
return (jsxRuntime.jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, children: jsxRuntime.jsxs(Table, { variant: "striped", children: [jsxRuntime.jsx(TableHeader, { canResize: true }), jsxRuntime.jsx(TableBody, {}), showFooter && jsxRuntime.jsx(TableFooter, {})] }) }));
|
|
581
|
+
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, }) => {
|
|
582
|
+
return (jsxRuntime.jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, children: jsxRuntime.jsxs(Table, { variant: "striped", children: [jsxRuntime.jsx(TableHeader, { canResize: true }), jsxRuntime.jsx(TableBody, {}), showFooter && jsxRuntime.jsx(TableFooter, {})] }) }));
|
|
583
583
|
};
|
|
584
584
|
|
|
585
585
|
const Table = ({ children, showLoading = false, loadingComponent = jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Loading..." }), ...props }) => {
|
|
@@ -793,9 +793,14 @@ const TablePagination = ({}) => {
|
|
|
793
793
|
return (jsxRuntime.jsxs(react.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost" }), jsxRuntime.jsx(react.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost" }), jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react.IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react.IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
|
|
794
794
|
};
|
|
795
795
|
|
|
796
|
-
const ReloadButton = ({ text = "Reload" }) => {
|
|
796
|
+
const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
|
|
797
797
|
const { refreshData } = useDataTableContext();
|
|
798
|
-
|
|
798
|
+
if (variant === "icon") {
|
|
799
|
+
return (jsxRuntime.jsx(react.Tooltip, { label: "refresh", children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", icon: jsxRuntime.jsx(io5.IoReload, {}), onClick: () => {
|
|
800
|
+
refreshData();
|
|
801
|
+
}, "aria-label": "refresh" }) }));
|
|
802
|
+
}
|
|
803
|
+
return (jsxRuntime.jsx(react.Button, { variant: "ghost", leftIcon: jsxRuntime.jsx(io5.IoReload, {}), onClick: () => {
|
|
799
804
|
refreshData();
|
|
800
805
|
}, children: text }));
|
|
801
806
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -295,14 +295,13 @@ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSu
|
|
|
295
295
|
return { data, loading, hasError, refreshData };
|
|
296
296
|
};
|
|
297
297
|
|
|
298
|
-
const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) => {
|
|
298
|
+
const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }) => {
|
|
299
299
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
300
300
|
url: url,
|
|
301
301
|
defaultData: {
|
|
302
302
|
success: false,
|
|
303
303
|
results: [],
|
|
304
304
|
count: 0,
|
|
305
|
-
filterCount: 0,
|
|
306
305
|
},
|
|
307
306
|
params: {
|
|
308
307
|
pagination: JSON.stringify({
|
|
@@ -320,6 +319,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
320
319
|
searching: globalFilter,
|
|
321
320
|
},
|
|
322
321
|
disableFirstFetch: true,
|
|
322
|
+
onFetchSuccess: onFetchSuccess,
|
|
323
323
|
});
|
|
324
324
|
const table = useReactTable({
|
|
325
325
|
_features: [DensityFeature],
|
|
@@ -439,9 +439,9 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
439
439
|
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
440
440
|
};
|
|
441
441
|
|
|
442
|
-
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsx(Fragment, {}), showFilterName = false, showFilterTags = false, filterOptions = [], }) => {
|
|
442
|
+
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsx(Fragment, {}), showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], }) => {
|
|
443
443
|
const { loading, hasError } = useDataTableContext();
|
|
444
|
-
return (jsxs(Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxs(Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "
|
|
444
|
+
return (jsxs(Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxs(Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { label: "An error occurred while fetching data", children: jsx(Box, { children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) }) })), showFilter && (jsxs(Fragment, { children: [jsx(GlobalFilter, {}), jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })), showReload && jsx(ReloadButton, {})] })] }), jsx(Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
445
445
|
return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }));
|
|
446
446
|
}) }), jsx(Flex, { gridColumn: "1 / span 2", children: showFilterTags && jsx(TableFilterTags, {}) }), jsx(Box, { overflow: "auto", gridColumn: "1 / span 2", width: "100%", height: "100%", children: children }), jsxs(Flex, { gap: "1rem", alignItems: "center", children: [jsx(PageSizeControl, {}), jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: totalText }), jsx(RowCountText, {})] })] }), jsx(Box, { justifySelf: "end", children: jsx(TablePagination, {}) })] }));
|
|
447
447
|
};
|
|
@@ -576,8 +576,8 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
576
576
|
})] }, crypto.randomUUID()))) }));
|
|
577
577
|
};
|
|
578
578
|
|
|
579
|
-
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, }) => {
|
|
580
|
-
return (jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, children: jsxs(Table, { variant: "striped", children: [jsx(TableHeader, { canResize: true }), jsx(TableBody, {}), showFooter && jsx(TableFooter, {})] }) }));
|
|
579
|
+
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, }) => {
|
|
580
|
+
return (jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, children: jsxs(Table, { variant: "striped", children: [jsx(TableHeader, { canResize: true }), jsx(TableBody, {}), showFooter && jsx(TableFooter, {})] }) }));
|
|
581
581
|
};
|
|
582
582
|
|
|
583
583
|
const Table = ({ children, showLoading = false, loadingComponent = jsx(Fragment, { children: "Loading..." }), ...props }) => {
|
|
@@ -791,9 +791,14 @@ const TablePagination = ({}) => {
|
|
|
791
791
|
return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost" }), jsx(Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsx(MdLastPage, {}) })] }));
|
|
792
792
|
};
|
|
793
793
|
|
|
794
|
-
const ReloadButton = ({ text = "Reload" }) => {
|
|
794
|
+
const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
|
|
795
795
|
const { refreshData } = useDataTableContext();
|
|
796
|
-
|
|
796
|
+
if (variant === "icon") {
|
|
797
|
+
return (jsx(Tooltip, { label: "refresh", children: jsx(IconButton, { variant: "ghost", icon: jsx(IoReload, {}), onClick: () => {
|
|
798
|
+
refreshData();
|
|
799
|
+
}, "aria-label": "refresh" }) }));
|
|
800
|
+
}
|
|
801
|
+
return (jsx(Button, { variant: "ghost", leftIcon: jsx(IoReload, {}), onClick: () => {
|
|
797
802
|
refreshData();
|
|
798
803
|
}, children: text }));
|
|
799
804
|
};
|
|
@@ -25,6 +25,7 @@ export interface DataTableServerProps<TData> {
|
|
|
25
25
|
setColumnOrder: OnChangeFn<ColumnOrderState>;
|
|
26
26
|
setDensity: OnChangeFn<DensityState>;
|
|
27
27
|
setColumnVisibility: OnChangeFn<VisibilityState>;
|
|
28
|
+
onFetchSuccess?: (response: DataResponse<TData>) => void;
|
|
28
29
|
}
|
|
29
30
|
export interface Result<T> {
|
|
30
31
|
results: T[];
|
|
@@ -32,6 +33,5 @@ export interface Result<T> {
|
|
|
32
33
|
export interface DataResponse<T> extends Result<T> {
|
|
33
34
|
success: boolean;
|
|
34
35
|
count: number;
|
|
35
|
-
filterCount: number;
|
|
36
36
|
}
|
|
37
|
-
export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,4 +2,4 @@ import { TableControlsProps } from "./TableControls";
|
|
|
2
2
|
export interface DefaultTableProps extends TableControlsProps {
|
|
3
3
|
showFooter?: boolean;
|
|
4
4
|
}
|
|
5
|
-
export declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,6 +8,7 @@ export interface TableControlsProps {
|
|
|
8
8
|
children?: JSX.Element;
|
|
9
9
|
showFilterName?: boolean;
|
|
10
10
|
showFilterTags?: boolean;
|
|
11
|
+
showReload?: boolean;
|
|
11
12
|
filterOptions?: string[];
|
|
12
13
|
}
|
|
13
|
-
export declare const TableControls: ({ totalText, showFilter, fitTableWidth, fitTableHeight, isMobile, children, showFilterName, showFilterTags, filterOptions, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const TableControls: ({ totalText, showFilter, fitTableWidth, fitTableHeight, isMobile, children, showFilterName, showFilterTags, showReload, filterOptions, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -77,7 +77,7 @@ export * from "./components/DataTable/TableHeader";
|
|
|
77
77
|
export * from "./components/DataTable/TableLoadingComponent";
|
|
78
78
|
export * from "./components/DataTable/TableOrderer";
|
|
79
79
|
export * from "./components/DataTable/TablePagination";
|
|
80
|
-
export * from "./components/DataTable/
|
|
80
|
+
export * from "./components/DataTable/ReloadButton";
|
|
81
81
|
export * from "./components/DataTable/TableSelector";
|
|
82
82
|
export * from "./components/DataTable/TableSorter";
|
|
83
83
|
export * from "./components/DataTable/TableViewer";
|
package/package.json
CHANGED