@tuturuuu/ui 0.25.2 → 0.26.0

package/src/components/ui/custom/tables/data-table.tsx

@@ -1,33 +1,73 @@
 'use client';
 
 import {
-  type ColumnDef,
   type ColumnFiltersState,
+  type ColumnVisibilityState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  type Row,
+  globalFilteringFeature,
+  type ReactTable,
+  type RowData,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
-  type VisibilityState,
+  type Column as TanStackColumn,
+  type ColumnDef as TanStackColumnDef,
+  type Row as TanStackRow,
+  tableFeatures,
+  useTable,
 } from '@tanstack/react-table';
 import { cn } from '@tuturuuu/utils/format';
 import { type ReactNode, useState } from 'react';
 import { Card } from '../../card';
 import {
-  Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Table as UiTable,
 } from '../../table';
 import { DataTablePagination } from './data-table-pagination';
 import { DataTableToolbar } from './data-table-toolbar';
 
+export const dataTableFeatures = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnFacetingFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  columnVisibilityFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+});
+
+const EMPTY_DATA: never[] = [];
+
+export type DataTableFeatures = typeof dataTableFeatures;
+export type ColumnDef<TData extends RowData, TValue = any> = TanStackColumnDef<
+  DataTableFeatures,
+  TData,
+  TValue
+>;
+export type Row<TData extends RowData> = TanStackRow<DataTableFeatures, TData>;
+export type Column<TData extends RowData, TValue = unknown> = TanStackColumn<
+  DataTableFeatures,
+  TData,
+  TValue
+>;
+export type Table<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+
 function isInteractiveTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
   return Boolean(
@@ -59,26 +99,27 @@ export interface ColumnGeneratorOptions<
 /**
  * Type for column generator functions that create table columns.
  */
-export type ColumnGenerator<TData = unknown, TValue = unknown> = (
+export type ColumnGenerator<TData extends RowData, TValue = unknown> = (
   options: ColumnGeneratorOptions<TData, TValue>
-) => ColumnDef<TData, TValue>[];
+) => ColumnDef<TData>[];
 
-export interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData extends RowData, TValue> {
   hideToolbar?: boolean;
   hidePagination?: boolean;
-  columns?: ColumnDef<TData, TValue>[];
+  columns?: ColumnDef<TData>[];
   filters?: ReactNode[] | ReactNode;
   extraColumns?: any[];
   extraData?: any;
   newObjectTitle?: string;
   editContent?: ReactNode;
+  emptyState?: ReactNode;
   namespace?: string | undefined;
   data?: TData[];
   count?: number | null;
   pageIndex?: number;
   pageSize?: number;
   defaultQuery?: string;
-  defaultVisibility?: VisibilityState;
+  defaultVisibility?: ColumnVisibilityState;
   disableSearch?: boolean;
   isFiltered?: boolean;
   enableServerSideSorting?: boolean;
@@ -114,7 +155,7 @@ export interface DataTableProps<TData, TValue> {
   rowWrapper?: (row: React.ReactElement, rowData: TData) => React.ReactElement;
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData, TValue>({
   hideToolbar = false,
   hidePagination = false,
   columns,
@@ -123,6 +164,7 @@ export function DataTable<TData, TValue>({
   extraData,
   newObjectTitle,
   editContent,
+  emptyState,
   namespace,
   data,
   count,
@@ -155,7 +197,7 @@ export function DataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = useState({});
   const [columnVisibility, setColumnVisibility] =
-    useState<VisibilityState>(defaultVisibility);
+    useState<ColumnVisibilityState>(defaultVisibility);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [sorting, setSorting] = useState<SortingState>(
     enableServerSideSorting && currentSortBy && currentSortOrder
@@ -163,8 +205,9 @@ export function DataTable<TData, TValue>({
       : []
   );
 
-  const table = useReactTable({
-    data: data || [],
+  const table = useTable({
+    features: dataTableFeatures,
+    data: data || EMPTY_DATA,
     columns:
       columnGenerator && t
         ? columnGenerator({ t, namespace, extraColumns, extraData })
@@ -215,14 +258,7 @@ export function DataTable<TData, TValue>({
       : setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: enableServerSideSorting
-      ? undefined
-      : getSortedRowModel(),
     manualSorting: enableServerSideSorting,
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
   });
 
   return (
@@ -250,7 +286,7 @@ export function DataTable<TData, TValue>({
         />
       )}
       <Card className={tableCardClassName}>
-        <Table className={tableClassName}>
+        <UiTable className={tableClassName}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -339,16 +375,19 @@ export function DataTable<TData, TValue>({
                     columns?.length ||
                     1
                   }
-                  className="h-24 text-center opacity-60"
+                  className={cn(
+                    'text-center',
+                    emptyState ? 'p-0' : 'h-24 opacity-60'
+                  )}
                 >
                   {data
-                    ? `${t?.('common.no-results')}.`
+                    ? emptyState || `${t?.('common.no-results')}.`
                     : `${t?.('common.loading')}…`}
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
-        </Table>
+        </UiTable>
       </Card>
 
       {hidePagination ||

package/src/components/ui/finance/invoices/columns.test.tsx

@@ -1,5 +1,5 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import { render, screen, waitFor } from '@testing-library/react';
+import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { invoiceColumns } from './columns';
 
@@ -19,8 +19,8 @@ function InvoicePriceCell({ price }: { price: number }) {
   });
   const priceColumn = columns.find(
     (column) =>
-      (column as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      'price'
+      (column as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === 'price'
   );
 
   if (typeof priceColumn?.cell !== 'function') return null;

package/src/components/ui/finance/invoices/columns.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import type { ColumnGeneratorOptions } from '@tuturuuu/ui/custom/tables/data-table';
+import type {
+  ColumnDef,
+  ColumnGeneratorOptions,
+} from '@tuturuuu/ui/custom/tables/data-table';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { InvoiceRowActions } from '@tuturuuu/ui/finance/invoices/row-actions';
 import {

package/src/components/ui/finance/invoices/pending-columns.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import { FileText } from '@tuturuuu/icons';
 import type { PendingInvoice } from '@tuturuuu/types/primitives/PendingInvoice';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Button } from '@tuturuuu/ui/button';
+import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import { formatCurrency } from '@tuturuuu/utils/format';

package/src/components/ui/finance/invoices/row-actions.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useQueryClient } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis, Eye } from '@tuturuuu/icons';
 import { deleteInvoice } from '@tuturuuu/internal-api/finance';
 import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
@@ -17,6 +16,7 @@ import {
   AlertDialogTrigger,
 } from '@tuturuuu/ui/alert-dialog';
 import { Button } from '@tuturuuu/ui/button';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/ui/finance/transactions/categories/columns.test.tsx

@@ -1,5 +1,5 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import { render, screen, waitFor } from '@testing-library/react';
+import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { transactionCategoryColumns } from './columns';
 
@@ -15,8 +15,8 @@ function CategoryAmountCell({ amount }: { amount: number }) {
   });
   const amountColumn = columns.find(
     (column) =>
-      (column as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      'amount'
+      (column as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === 'amount'
   );
 
   if (typeof amountColumn?.cell !== 'function') return null;
@@ -45,8 +45,8 @@ function CategoryCountCell({ count }: { count: number }) {
   });
   const countColumn = columns.find(
     (column) =>
-      (column as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      'transaction_count'
+      (column as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === 'transaction_count'
   );
 
   if (typeof countColumn?.cell !== 'function') return null;

package/src/components/ui/finance/transactions/categories/columns.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import { ArrowDownCircle, ArrowUpCircle } from '@tuturuuu/icons';
 import type { TransactionCategoryWithStats } from '@tuturuuu/types/primitives/TransactionCategory';
 import {
   getIconComponentByKey,
   type PlatformIconKey,
 } from '@tuturuuu/ui/custom/icon-picker';
-import type { ColumnGeneratorOptions } from '@tuturuuu/ui/custom/tables/data-table';
+import type {
+  ColumnDef,
+  ColumnGeneratorOptions,
+} from '@tuturuuu/ui/custom/tables/data-table';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { TransactionCategoryRowActions } from '@tuturuuu/ui/finance/transactions/categories/row-actions';
 import { computeAccessibleLabelStyles } from '@tuturuuu/utils/label-colors';

package/src/components/ui/finance/transactions/categories/row-actions.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis } from '@tuturuuu/icons';
 import { deleteTransactionCategory } from '@tuturuuu/internal-api/finance';
 import type { TransactionCategory } from '@tuturuuu/types/primitives/TransactionCategory';
@@ -18,6 +17,7 @@ import {
 } from '@tuturuuu/ui/alert-dialog';
 import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/ui/finance/transactions/columns.test.tsx

@@ -1,5 +1,5 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import { render, screen, waitFor } from '@testing-library/react';
+import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { transactionColumns } from './columns';
 
@@ -23,8 +23,8 @@ function TransactionAmountCell({ amount }: { amount: number }) {
   });
   const amountColumn = columns.find(
     (column) =>
-      (column as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      'amount'
+      (column as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === 'amount'
   );
 
   if (typeof amountColumn?.cell !== 'function') return null;
@@ -57,8 +57,8 @@ function TransactionColumnCell({
   });
   const column = columns.find(
     (item) =>
-      (item as ColumnDef<unknown> & { accessorKey?: string }).accessorKey ===
-      accessorKey
+      (item as ColumnDef<Record<string, unknown>> & { accessorKey?: string })
+        .accessorKey === accessorKey
   );
 
   if (typeof column?.cell !== 'function') return null;

package/src/components/ui/finance/transactions/columns.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import { Check, X } from '@tuturuuu/icons';
 import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import type { ColumnGeneratorOptions } from '@tuturuuu/ui/custom/tables/data-table';
+import type {
+  ColumnDef,
+  ColumnGeneratorOptions,
+} from '@tuturuuu/ui/custom/tables/data-table';
 import { TransactionRowActions } from '@tuturuuu/ui/finance/transactions/row-actions';
 import { formatCurrency } from '@tuturuuu/utils/format';
 import moment from 'moment';

package/src/components/ui/finance/transactions/row-actions.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useQueryClient } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis, Eye } from '@tuturuuu/icons';
 import { deleteTransaction as deleteTransactionWithInternalApi } from '@tuturuuu/internal-api/finance';
 import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
@@ -18,6 +17,7 @@ import {
 } from '@tuturuuu/ui/alert-dialog';
 import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/ui/finance/wallets/columns.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import type { ColumnDef } from '@tanstack/react-table';
 import {
   BookOpen,
   Check,
@@ -14,7 +13,10 @@ import {
 } from '@tuturuuu/icons';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
 import { Badge } from '@tuturuuu/ui/badge';
-import type { ColumnGeneratorOptions } from '@tuturuuu/ui/custom/tables/data-table';
+import type {
+  ColumnDef,
+  ColumnGeneratorOptions,
+} from '@tuturuuu/ui/custom/tables/data-table';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { WalletRowActions } from '@tuturuuu/ui/finance/wallets/row-actions';
 import type { ExchangeRate } from '@tuturuuu/utils/exchange-rates';

package/src/components/ui/finance/wallets/row-actions.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useQueryClient } from '@tanstack/react-query';
-import type { Row } from '@tanstack/react-table';
 import { Ellipsis, Eye } from '@tuturuuu/icons';
 import { deleteWallet as deleteWalletWithInternalApi } from '@tuturuuu/internal-api/finance';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
@@ -18,6 +17,7 @@ import {
 } from '@tuturuuu/ui/alert-dialog';
 import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { Row } from '@tuturuuu/ui/custom/tables/data-table';
 import {
   DropdownMenu,
   DropdownMenuContent,