@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,130 @@
+'use client';
+
+import {
+  DataTable,
+  type DataTableProps,
+} from '@tuturuuu/ui/custom/tables/data-table';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+
+function CustomDataTableInner<TData, TValue>({
+  namespace,
+  hideToolbar,
+  hidePagination,
+  className,
+  rowWrapper,
+  onRowClick,
+  onRowDoubleClick,
+  enableServerSideSorting,
+  ...props
+}: DataTableProps<TData, TValue>) {
+  const [mounted, setMounted] = useState(false);
+  const t = useTranslations();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const pageSize = mounted ? Number(searchParams.get('pageSize') || 10) : 10;
+  const page = mounted ? Number(searchParams.get('page') || 0) : 0;
+  const pageIndex = page > 0 ? page - 1 : 0;
+  const currentSortBy = mounted
+    ? searchParams.get('sortBy') || undefined
+    : undefined;
+  const currentSortOrder = mounted
+    ? (searchParams.get('sortOrder') as 'asc' | 'desc') || undefined
+    : undefined;
+
+  const defaultQuery = useMemo(
+    () => (mounted ? searchParams.get('q') || '' : ''),
+    [mounted, searchParams]
+  );
+
+  const handleSearch = useCallback(
+    (query: string) => {
+      if (!mounted) return;
+
+      const params = new URLSearchParams(searchParams);
+      if (query) {
+        params.set('q', query);
+        params.set('page', '1');
+      } else {
+        params.delete('q');
+        params.delete('page');
+      }
+      router.push(`${pathname}?${params.toString()}`);
+      router.refresh();
+    },
+    [mounted, searchParams, pathname, router]
+  );
+
+  const handleSetParams = useCallback(
+    (params: {
+      page?: number;
+      pageSize?: string;
+      sortBy?: string;
+      sortOrder?: string;
+    }) => {
+      if (!mounted) return;
+
+      const urlParams = new URLSearchParams(searchParams);
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined) {
+          urlParams.set(key, value.toString());
+        } else {
+          urlParams.delete(key);
+        }
+      });
+      router.push(`${pathname}?${urlParams.toString()}`);
+      router.refresh();
+    },
+    [mounted, searchParams, pathname, router]
+  );
+
+  const handleResetParams = useCallback(() => {
+    if (!mounted) return;
+
+    router.push(pathname);
+    router.refresh();
+  }, [mounted, pathname, router]);
+
+  return (
+    <DataTable
+      t={t}
+      hideToolbar={hideToolbar}
+      hidePagination={hidePagination}
+      namespace={namespace}
+      pageIndex={pageIndex || 0}
+      pageSize={pageSize || 10}
+      onRefresh={() => router.refresh()}
+      defaultQuery={defaultQuery}
+      onSearch={handleSearch}
+      setParams={handleSetParams}
+      resetParams={handleResetParams}
+      isFiltered={mounted ? searchParams.toString().length > 0 : false}
+      newObjectTitle={t('common.create')}
+      className={className}
+      rowWrapper={rowWrapper}
+      onRowClick={onRowClick}
+      onRowDoubleClick={onRowDoubleClick}
+      enableServerSideSorting={enableServerSideSorting}
+      currentSortBy={currentSortBy}
+      currentSortOrder={currentSortOrder}
+      {...props}
+    />
+  );
+}
+
+export function CustomDataTable<TData, TValue>(
+  props: DataTableProps<TData, TValue>
+) {
+  return (
+    <Suspense fallback={null}>
+      <CustomDataTableInner {...props} />
+    </Suspense>
+  );
+}

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

@@ -1,3 +1,7 @@
+import type { Column } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ChevronDown, EyeOff } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type React from 'react';
 import { Button } from '../../button';
 import {
   DropdownMenu,
@@ -6,10 +10,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../dropdown-menu';
-import { Column } from '@tanstack/react-table';
-import { cn } from '@tuturuuu/utils/format';
-import { ArrowDown, ArrowUp, ChevronDown, EyeOff } from 'lucide-react';
-import React from 'react';
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,6 +24,8 @@ export function DataTableColumnHeader<TData, TValue>({
   title,
   className,
 }: DataTableColumnHeaderProps<TData, TValue>) {
+  const translate = typeof t === 'function' ? t : (key: string) => key;
+
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -54,16 +56,16 @@ export function DataTableColumnHeader<TData, TValue>({
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
             <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            {t('common.ascending')}
+            {translate('common.ascending')}
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
             <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            {t('common.descending')}
+            {translate('common.descending')}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
             <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            {t('common.hide_column')}
+            {translate('common.hide_column')}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

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

@@ -1,9 +1,9 @@
 'use client';
 
+import { Plus } from '@tuturuuu/icons';
+import type { ReactNode } from 'react';
 import { Button } from '../../button';
 import { DialogContent, DialogTrigger } from '../../dialog';
-import { Plus } from 'lucide-react';
-import { ReactNode } from 'react';
 
 export interface DataTableCreateButtonProps {
   newObjectTitle?: string;

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

@@ -1,3 +1,7 @@
+import type { Column } from '@tanstack/react-table';
+import { Check, PlusCircle } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type * as React from 'react';
 import { Badge } from '../../badge';
 import { Button } from '../../button';
 import {
@@ -11,10 +15,6 @@ import {
 } from '../../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
 import { Separator } from '../../separator';
-import { Column } from '@tanstack/react-table';
-import { cn } from '@tuturuuu/utils/format';
-import { Check, PlusCircle } from 'lucide-react';
-import * as React from 'react';
 
 interface DataTableFacetedFilterProps<TData, TValue> {
   column?: Column<TData, TValue>;
@@ -75,7 +75,7 @@ export function DataTableFacetedFilter<TData, TValue>({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
+      <PopoverContent className="w-50 p-0" align="start">
         <Command>
           <CommandInput placeholder={title} />
           <CommandList>

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

@@ -1,5 +1,13 @@
 'use client';
 
+import type { Table } from '@tanstack/react-table';
+import {
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  ChevronLeft,
+  ChevronRight,
+} from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
 import { Button } from '../../button';
 import {
   Select,
@@ -9,14 +17,6 @@ import {
   SelectValue,
 } from '../../select';
 import { Separator } from '../../separator';
-import { Table } from '@tanstack/react-table';
-import { cn } from '@tuturuuu/utils/format';
-import {
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
 
 interface DataTablePaginationProps<TData> {
   table?: Table<TData>;
@@ -27,7 +27,7 @@ interface DataTablePaginationProps<TData> {
   pageSize?: number;
   additionalSizes?: number[];
   t?: any;
-  // eslint-disable-next-line no-unused-vars
+
   setParams?: (params: { page?: number; pageSize?: string }) => void;
 }
 
@@ -35,13 +35,22 @@ export function DataTablePagination<TData>({
   table,
   count,
   className,
-  pageIndex,
-  pageCount,
-  pageSize,
+  pageIndex: pageIndexProp,
+  pageCount: pageCountProp,
+  pageSize: pageSizeProp,
   additionalSizes,
   t,
   setParams,
 }: DataTablePaginationProps<TData>) {
+  // Use props if provided, otherwise fall back to table state
+  // When setParams is provided, we're in server-side pagination mode
+  const isServerSide = !!setParams;
+
+  const pageIndex =
+    pageIndexProp ?? table?.getState().pagination.pageIndex ?? 0;
+  const pageSize = pageSizeProp ?? table?.getState().pagination.pageSize ?? 10;
+  const pageCount = pageCountProp ?? table?.getPageCount() ?? 0;
+
   // filter duplicate and sort sizes
   const sizes = [
     5,
@@ -52,17 +61,15 @@ export function DataTablePagination<TData>({
     200,
     500,
     1000,
-    pageSize ?? 10,
+    pageSize,
     ...(additionalSizes ?? []),
   ]
     .filter((value, index, self) => self.indexOf(value) === index)
     .sort((a, b) => a - b);
 
-  const isPageOutOfRange = table
-    ? table.getState().pagination.pageIndex + 1 > table.getPageCount()
-    : pageIndex !== undefined
-      ? pageIndex + 1 > (pageCount ?? 1)
-      : false;
+  const isPageOutOfRange = pageIndex + 1 > pageCount;
+  const canGoPrevious = pageIndex > 0;
+  const canGoNext = pageIndex < pageCount - 1;
 
   return (
     <div
@@ -71,8 +78,8 @@ export function DataTablePagination<TData>({
         className
       )}
     >
-      {count != undefined && count > 0 ? (
-        <div className="flex-none text-sm text-muted-foreground">
+      {count != null && count > 0 ? (
+        <div className="flex-none text-muted-foreground text-sm">
           {/* {locale === 'vi' || locale === 'vi-VN' ? t('common.selected') : null}{' '} */}
           {/* <span className="text-primary font-semibold">
             {table ? table.getFilteredSelectedRowModel().rows.length : 0}
@@ -92,145 +99,116 @@ export function DataTablePagination<TData>({
 
       <Separator className="my-1 md:hidden" />
 
-      <div className="flex flex-wrap items-center justify-center gap-2 text-center md:gap-4 lg:gap-8">
+      <div className="flex flex-wrap items-center justify-center gap-3 text-center sm:gap-4 lg:gap-8">
         <div className="hidden items-center space-x-2 md:flex">
-          <p className="text-sm font-medium">
+          <p className="font-medium text-sm">
             {t?.('common.rows-per-page') ?? 'Rows per page'}
           </p>
           <Select
-            value={`${pageSize ?? table?.getState().pagination.pageSize ?? 0}`}
+            value={`${pageSize}`}
             onValueChange={(value) => {
-              if (table) {
+              if (isServerSide) {
+                // Server-side pagination: only update via setParams
+                setParams?.({ page: 1, pageSize: value });
+              } else if (table) {
+                // Client-side pagination: update table state
                 table.setPageIndex(0);
                 table.setPageSize(Number(value));
               }
-
-              setParams?.({ page: 1, pageSize: value });
             }}
           >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue
-                placeholder={
-                  pageSize ?? table?.getState().pagination.pageSize ?? 0
-                }
-              />
+            <SelectTrigger className="h-8 w-17.5">
+              <SelectValue placeholder={pageSize} />
             </SelectTrigger>
             <SelectContent side="top">
-              {sizes.map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
+              {sizes.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
-        <div className="w-fit text-sm text-muted-foreground">
+        <div className="w-fit text-muted-foreground text-sm">
           {t?.('common.page') ?? 'Page'}{' '}
           <span className="font-semibold text-primary">
-            {isPageOutOfRange
-              ? 1
-              : (pageIndex ?? table?.getState().pagination.pageIndex ?? 0) + 1}
+            {isPageOutOfRange ? 1 : pageIndex + 1}
           </span>
-          {(pageCount ?? table?.getPageCount() ?? 0) > 0 && (
+          {pageCount > 0 && (
             <>
               {' '}
               {t?.('common.of') ?? 'of'}{' '}
-              <span className="font-semibold text-primary">
-                {pageCount ?? table?.getPageCount() ?? 1}
-              </span>
+              <span className="font-semibold text-primary">{pageCount}</span>
             </>
           )}
         </div>
 
-        {(pageCount ?? table?.getPageCount() ?? 0) > 0 && (
+        {pageCount > 0 && (
           <div className="flex items-center space-x-2">
             <Button
               variant="outline"
-              className="hidden h-8 w-8 p-0 lg:flex"
+              className="hidden h-9 w-9 p-0 md:flex md:h-8 md:w-8"
               onClick={() => {
-                if (table) {
+                if (isServerSide) {
+                  setParams?.({ page: 1 });
+                } else if (table) {
                   table.resetRowSelection();
                   table.setPageIndex(0);
                 }
-
-                setParams?.({ page: 1 });
               }}
-              disabled={
-                (pageIndex !== undefined
-                  ? pageIndex <= 0
-                  : table && !table.getCanPreviousPage()) || isPageOutOfRange
-              }
+              disabled={!canGoPrevious || isPageOutOfRange}
             >
               <span className="sr-only">Go to first page</span>
               <ArrowLeftToLine className="h-4 w-4" />
             </Button>
             <Button
               variant="outline"
-              className="h-8 w-8 p-0"
+              className="h-9 w-9 p-0 sm:h-8 sm:w-8"
               onClick={() => {
-                if (table) {
+                if (isServerSide) {
+                  // pageIndex is 0-based, page param is 1-based
+                  const newPage = pageIndex; // pageIndex when on page 2 (index 1) -> sends page: 1
+                  setParams?.({ page: newPage });
+                } else if (table) {
                   table.resetRowSelection();
                   table.previousPage();
                 }
-
-                setParams?.({
-                  page:
-                    pageIndex ?? table?.getState().pagination.pageIndex ?? 0,
-                });
               }}
-              disabled={
-                (pageIndex !== undefined
-                  ? pageIndex <= 0
-                  : table && !table.getCanPreviousPage()) || isPageOutOfRange
-              }
+              disabled={!canGoPrevious || isPageOutOfRange}
             >
               <span className="sr-only">Go to previous page</span>
               <ChevronLeft className="h-4 w-4" />
             </Button>
             <Button
               variant="outline"
-              className="h-8 w-8 p-0"
+              className="h-9 w-9 p-0 sm:h-8 sm:w-8"
               onClick={() => {
-                if (table) {
+                if (isServerSide) {
+                  // pageIndex is 0-based, page param is 1-based
+                  const newPage = isPageOutOfRange ? 2 : pageIndex + 2;
+                  setParams?.({ page: newPage });
+                } else if (table) {
                   table.resetRowSelection();
                   table.nextPage();
                 }
-
-                setParams?.({
-                  page: isPageOutOfRange
-                    ? 2
-                    : (pageIndex ??
-                        table?.getState().pagination.pageIndex ??
-                        0) + 2,
-                });
               }}
-              disabled={
-                (pageIndex !== undefined
-                  ? pageIndex >= (pageCount ?? 0) - 1
-                  : table && !table.getCanNextPage()) && !isPageOutOfRange
-              }
+              disabled={!canGoNext && !isPageOutOfRange}
             >
               <span className="sr-only">Go to next page</span>
               <ChevronRight className="h-4 w-4" />
             </Button>
             <Button
               variant="outline"
-              className="hidden h-8 w-8 p-0 lg:flex"
+              className="hidden h-9 w-9 p-0 md:flex md:h-8 md:w-8"
               onClick={() => {
-                if (table) {
+                if (isServerSide) {
+                  setParams?.({ page: pageCount });
+                } else if (table) {
                   table.resetRowSelection();
                   table.setPageIndex(table.getPageCount() - 1);
                 }
-
-                setParams?.({
-                  page: pageCount ?? table?.getPageCount() ?? 1,
-                });
               }}
-              disabled={
-                (pageIndex !== undefined
-                  ? pageIndex >= (pageCount ?? 0) - 1
-                  : table && !table.getCanNextPage()) && !isPageOutOfRange
-              }
+              disabled={!canGoNext && !isPageOutOfRange}
             >
               <span className="sr-only">Go to last page</span>
               <ArrowRightToLine className="h-4 w-4" />

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { Button } from '../../button';
+import { RefreshCcw } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
-import { RefreshCcw } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { Button } from '../../button';
 
 export function DataTableRefreshButton({
   onRefresh,

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

@@ -1,14 +1,23 @@
 'use client';
 
+import type { Table } from '@tanstack/react-table';
+import { Download, RotateCcw, Upload } from '@tuturuuu/icons';
+import { Dialog, DialogContent, DialogTrigger } from '@tuturuuu/ui/dialog';
+import type { ReactNode } from 'react';
 import { Button } from '../../button';
 import SearchBar from '../search-bar';
 import { DataTableCreateButton } from './data-table-create-button';
 import { DataTableRefreshButton } from './data-table-refresh-button';
 import { DataTableViewOptions } from './data-table-view-options';
-import { Table } from '@tanstack/react-table';
-import { Dialog, DialogContent, DialogTrigger } from '@tuturuuu/ui/dialog';
-import { Download, RotateCcw, Upload } from 'lucide-react';
-import { ReactNode } from 'react';
+
+type DataTableExtraColumn = {
+  id: string;
+  name?: string;
+};
+
+type DataTableTranslator = ((key: string) => string) & {
+  has?: (key: string) => boolean;
+};
 
 interface DataTableToolbarProps<TData> {
   hasData: boolean;
@@ -17,15 +26,18 @@ interface DataTableToolbarProps<TData> {
   namespace: string | undefined;
   table: Table<TData>;
   filters?: ReactNode[] | ReactNode;
-  extraColumns?: any[];
+  extraColumns?: DataTableExtraColumn[];
   defaultQuery?: string;
   disableSearch?: boolean;
-  isEmpty: boolean;
-  t?: any;
+  isFiltered?: boolean;
+  t?: DataTableTranslator;
   importContent?: ReactNode;
   exportContent?: ReactNode;
+  /** Custom toolbar actions rendered directly (not wrapped in dialogs) */
+  toolbarActions?: ReactNode;
   onRefresh: () => void;
-  // eslint-disable-next-line no-unused-vars
+  selectedRowsActions?: (selectedRows: TData[]) => ReactNode;
+
   onSearch: (query: string) => void;
   resetParams: () => void;
 }
@@ -39,29 +51,32 @@ export function DataTableToolbar<TData>({
   extraColumns,
   defaultQuery,
   disableSearch = false,
-  isEmpty,
+  isFiltered: isFilteredProp,
   t,
   namespace,
   importContent,
   exportContent,
+  toolbarActions,
   onRefresh,
+  selectedRowsActions,
   onSearch,
   resetParams,
 }: DataTableToolbarProps<TData>) {
   const isFiltered =
-    table.getState().columnFilters.length > 0 ||
-    !isEmpty ||
-    (defaultQuery?.length || 0) > 0;
+    isFilteredProp !== undefined
+      ? isFilteredProp
+      : table.getState().columnFilters.length > 0 ||
+        (defaultQuery?.length || 0) > 0;
 
   return (
-    <div className="flex flex-col items-start justify-between gap-2 md:flex-row">
-      <div className="grid w-full flex-1 flex-wrap items-center gap-2 md:flex">
+    <div className="flex flex-col items-start justify-between gap-2 lg:flex-row">
+      <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:flex-1 sm:flex-wrap sm:items-center">
         {disableSearch || (
           <SearchBar
             t={t}
             defaultValue={defaultQuery}
             onSearch={onSearch}
-            className="col-span-full w-full md:col-span-1 md:max-w-xs"
+            className="col-span-full w-full bg-background md:col-span-1 md:max-w-xs"
           />
         )}
         {filters}
@@ -78,17 +93,24 @@ export function DataTableToolbar<TData>({
             <RotateCcw className="h-4 w-4" />
           </Button>
         )}
+        {table.getSelectedRowModel().rows.length > 0 && selectedRowsActions && (
+          <div className="flex items-center gap-2">
+            {selectedRowsActions(
+              table.getSelectedRowModel().rows.map((r) => r.original)
+            )}
+          </div>
+        )}
       </div>
 
       {importContent && (
         <Dialog>
           <DialogTrigger asChild>
             <Button variant="outline" size="sm" className="h-8 w-full md:w-fit">
-              <Upload className="h-4 w-4" />
+              <Download className="h-4 w-4" />
               {t?.('common.import')}
             </Button>
           </DialogTrigger>
-          <DialogContent className="max-w-sm">{importContent}</DialogContent>
+          <DialogContent className="max-w-4xl">{importContent}</DialogContent>
         </Dialog>
       )}
 
@@ -100,7 +122,7 @@ export function DataTableToolbar<TData>({
               size="sm"
               className="ml-auto h-8 w-full md:w-fit"
             >
-              <Download className="h-4 w-4" />
+              <Upload className="h-4 w-4" />
               {t?.('common.export')}
             </Button>
           </DialogTrigger>
@@ -108,13 +130,14 @@ export function DataTableToolbar<TData>({
         </Dialog>
       )}
 
-      <div className="grid w-full grid-cols-2 gap-2 md:flex md:w-fit">
+      <div className="grid w-full grid-cols-3 gap-2 sm:flex sm:w-fit">
         {editContent && (
           <DataTableCreateButton
             newObjectTitle={newObjectTitle}
             editContent={editContent}
           />
         )}
+        {toolbarActions}
         {hasData && (
           <DataTableRefreshButton
             onRefresh={onRefresh}