m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-30 13:41:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated DataTable rendering.

Browse Source
This commit is contained in:
Mike Cao 2023-10-07 22:58:46 -07:00
parent 8b48130d5f
commit ef9f8ed816
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(main)/settings/layout.module.css
View File

@ -6,7 +6,7 @@
.menu { .menu {
width: 240px; width: 240px;
padding-top: 40px; padding-top: 34px;
padding-right: 20px; padding-right: 20px;
} }

16
src/components/common/DataTable.tsx
View File

@ -25,16 +25,16 @@ export interface DataTableProps {
error: unknown; error: unknown;
}; };
searchDelay?: number; searchDelay?: number;
showSearch?: boolean; allowSearch?: boolean;
showPaging?: boolean; allowPaging?: boolean;
children: ReactNode | ((data: any) => ReactNode); children: ReactNode | ((data: any) => ReactNode);
} }
export function DataTable({ export function DataTable({
queryResult, queryResult,
searchDelay = 600, searchDelay = 600,
showSearch = true, allowSearch = true,
showPaging = true, allowPaging = true,
children, children,
}: DataTableProps) { }: DataTableProps) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
@ -58,7 +58,7 @@ export function DataTable({
return ( return (
<> <>
{(hasData || query || isLoading) && showSearch && ( {allowSearch && (hasData || query) && (
<SearchField <SearchField
className={styles.search} className={styles.search}
value={query} value={query}
@ -73,12 +73,10 @@ export function DataTable({
> >
{hasData ? (typeof children === 'function' ? children(result) : children) : null} {hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading icon="dots" />} {isLoading && <Loading icon="dots" />}
{!isLoading && !hasData && !query && ( {!isLoading && !hasData && !query && <Empty />}
<Empty message={formatMessage(messages.noDataAvailable)} />
)}
{noResults && <Empty message={formatMessage(messages.noResultsFound)} />} {noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</div> </div>
{showPaging && ( {allowPaging && hasData && (
<Pager <Pager
className={styles.pager} className={styles.pager}
page={page} page={page}