diff --git a/libs/ui/src/lib/data/AdvancedTable.tsx b/libs/ui/src/lib/data/AdvancedTable.tsx index c82e817d4..4c2fc12cb 100644 --- a/libs/ui/src/lib/data/AdvancedTable.tsx +++ b/libs/ui/src/lib/data/AdvancedTable.tsx @@ -1,16 +1,16 @@ -import { ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useState } from 'react'; import { Table, - TextInput, - ActionIcon, + Button, + Menu, + Checkbox, Group, Text, Pagination, Loader, Center, } from '@mantine/core'; -import { useDebouncedValue } from '@mantine/hooks'; -import { IconSearch, IconRefresh } from '@tabler/icons-react'; +import { IconRefresh, IconEye } from '@tabler/icons-react'; import { useTranslation } from 'react-i18next'; export interface AdvancedColumn { @@ -20,6 +20,8 @@ export interface AdvancedColumn { cell?: (ctx: { row: { original: T }; value: unknown }) => ReactNode; size?: number; align?: 'left' | 'center' | 'right'; + /** Whether column starts visible. Default true. */ + enabled?: boolean; } interface AdvancedTableProps { @@ -56,24 +58,43 @@ export function AdvancedTable({ onPageChange, pageSize = 10, refresh, - onSearchChange, isLoading = false, emptyText, }: AdvancedTableProps) { const { t } = useTranslation(); + const [visible, setVisible] = useState(columns.map((c) => c.enabled ?? true)); + const toggleColumn = (i: number) => + setVisible((prev) => prev.map((v, idx) => (idx === i ? !v : v))); + const shownColumns = columns.filter((_, i) => visible[i] ?? true); return (
{tableName} - {onSearchChange && ( - - )} + + + + + + {columns.map((col, i) => ( + toggleColumn(i)}> + toggleColumn(i)} + readOnly + /> + + ))} + + {refresh && ( - - - + )} @@ -81,7 +102,7 @@ export function AdvancedTable({ - {columns.map((col, i) => ( + {shownColumns.map((col, i) => ( {col.header} @@ -91,7 +112,7 @@ export function AdvancedTable({ {isLoading ? ( - +
@@ -99,7 +120,7 @@ export function AdvancedTable({
) : data.length === 0 ? ( - + {emptyText ?? t('common.noResult', 'No results')} @@ -108,7 +129,7 @@ export function AdvancedTable({ ) : ( data.map((row, rowIndex) => ( - {columns.map((col, i) => { + {shownColumns.map((col, i) => { const value = getByPath(row, col.accessorKey); return ( @@ -135,29 +156,3 @@ export function AdvancedTable({ ); } - -function SearchBox({ - tableName, - onSearchChange, -}: { - tableName: string; - onSearchChange: (q: string) => void; -}) { - const { t } = useTranslation(); - const [value, setValue] = useState(''); - const [debounced] = useDebouncedValue(value, 300); - - useEffect(() => { - onSearchChange(debounced); - }, [debounced, onSearchChange]); - - return ( - } - size="sm" - value={value} - onChange={(e) => setValue(e.currentTarget.value)} - /> - ); -}