@tuturuuu/ui 0.0.4

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

@@ -0,0 +1,243 @@
+'use client';
+
+import { Button } from '../../button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  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>;
+  count?: number | null;
+  className?: string;
+  pageIndex?: number;
+  pageCount?: number;
+  pageSize?: number;
+  additionalSizes?: number[];
+  t?: any;
+  // eslint-disable-next-line no-unused-vars
+  setParams?: (params: { page?: number; pageSize?: string }) => void;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  count,
+  className,
+  pageIndex,
+  pageCount,
+  pageSize,
+  additionalSizes,
+  t,
+  setParams,
+}: DataTablePaginationProps<TData>) {
+  // filter duplicate and sort sizes
+  const sizes = [
+    5,
+    10,
+    20,
+    50,
+    100,
+    200,
+    500,
+    1000,
+    pageSize ?? 10,
+    ...(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;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-between gap-1 px-2 text-center md:flex-row',
+        className
+      )}
+    >
+      {count != undefined && count > 0 ? (
+        <div className="flex-none text-sm text-muted-foreground">
+          {/* {locale === 'vi' || locale === 'vi-VN' ? t('common.selected') : null}{' '} */}
+          {/* <span className="text-primary font-semibold">
+            {table ? table.getFilteredSelectedRowModel().rows.length : 0}
+          </span>{' '}
+          {t('common.of')}{' '} */}
+          {/* {table.getFilteredRowModel().rows.length} row(s) selected. */}
+          <span className="font-semibold text-primary">{count}</span>{' '}
+          {t?.('common.result(s)') ?? 'result(s)'}
+          {/* {locale !== 'vi' && locale !== 'vi-VN'
+            ? ' ' + t('common.selected').toLowerCase()
+            : null} */}
+          .
+        </div>
+      ) : (
+        <div />
+      )}
+
+      <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="hidden items-center space-x-2 md:flex">
+          <p className="text-sm font-medium">
+            {t?.('common.rows-per-page') ?? 'Rows per page'}
+          </p>
+          <Select
+            value={`${pageSize ?? table?.getState().pagination.pageSize ?? 0}`}
+            onValueChange={(value) => {
+              if (table) {
+                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>
+            <SelectContent side="top">
+              {sizes.map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="w-fit text-sm text-muted-foreground">
+          {t?.('common.page') ?? 'Page'}{' '}
+          <span className="font-semibold text-primary">
+            {isPageOutOfRange
+              ? 1
+              : (pageIndex ?? table?.getState().pagination.pageIndex ?? 0) + 1}
+          </span>
+          {(pageCount ?? table?.getPageCount() ?? 0) > 0 && (
+            <>
+              {' '}
+              {t?.('common.of') ?? 'of'}{' '}
+              <span className="font-semibold text-primary">
+                {pageCount ?? table?.getPageCount() ?? 1}
+              </span>
+            </>
+          )}
+        </div>
+
+        {(pageCount ?? table?.getPageCount() ?? 0) > 0 && (
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => {
+                if (table) {
+                  table.resetRowSelection();
+                  table.setPageIndex(0);
+                }
+
+                setParams?.({ page: 1 });
+              }}
+              disabled={
+                (pageIndex !== undefined
+                  ? pageIndex <= 0
+                  : table && !table.getCanPreviousPage()) || 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"
+              onClick={() => {
+                if (table) {
+                  table.resetRowSelection();
+                  table.previousPage();
+                }
+
+                setParams?.({
+                  page:
+                    pageIndex ?? table?.getState().pagination.pageIndex ?? 0,
+                });
+              }}
+              disabled={
+                (pageIndex !== undefined
+                  ? pageIndex <= 0
+                  : table && !table.getCanPreviousPage()) || 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"
+              onClick={() => {
+                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
+              }
+            >
+              <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"
+              onClick={() => {
+                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
+              }
+            >
+              <span className="sr-only">Go to last page</span>
+              <ArrowRightToLine className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { Button } from '../../button';
+import { cn } from '@tuturuuu/utils/format';
+import { RefreshCcw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function DataTableRefreshButton({
+  onRefresh,
+  refreshText,
+  disabled,
+}: {
+  onRefresh: () => void;
+  refreshText: string;
+  disabled?: boolean;
+}) {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  useEffect(() => {
+    if (!isRefreshing) return;
+    const timeout = setTimeout(() => {
+      setIsRefreshing(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isRefreshing]);
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="ml-auto h-8 w-full md:w-fit"
+      onClick={() => {
+        setIsRefreshing(true);
+        onRefresh();
+      }}
+      disabled={isRefreshing || disabled}
+    >
+      <RefreshCcw className={cn('h-4 w-4', isRefreshing && 'animate-spin')} />
+      {refreshText}
+    </Button>
+  );
+}

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

@@ -0,0 +1,133 @@
+'use client';
+
+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';
+
+interface DataTableToolbarProps<TData> {
+  hasData: boolean;
+  newObjectTitle?: string;
+  editContent?: ReactNode;
+  namespace: string | undefined;
+  table: Table<TData>;
+  filters?: ReactNode[] | ReactNode;
+  extraColumns?: any[];
+  defaultQuery?: string;
+  disableSearch?: boolean;
+  isEmpty: boolean;
+  t?: any;
+  importContent?: ReactNode;
+  exportContent?: ReactNode;
+  onRefresh: () => void;
+  // eslint-disable-next-line no-unused-vars
+  onSearch: (query: string) => void;
+  resetParams: () => void;
+}
+
+export function DataTableToolbar<TData>({
+  hasData,
+  newObjectTitle,
+  editContent,
+  table,
+  filters,
+  extraColumns,
+  defaultQuery,
+  disableSearch = false,
+  isEmpty,
+  t,
+  namespace,
+  importContent,
+  exportContent,
+  onRefresh,
+  onSearch,
+  resetParams,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered =
+    table.getState().columnFilters.length > 0 ||
+    !isEmpty ||
+    (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">
+        {disableSearch || (
+          <SearchBar
+            t={t}
+            defaultValue={defaultQuery}
+            onSearch={onSearch}
+            className="col-span-full w-full md:col-span-1 md:max-w-xs"
+          />
+        )}
+        {filters}
+        {isFiltered && (
+          <Button
+            variant="secondary"
+            onClick={() => {
+              table.resetColumnFilters();
+              resetParams();
+            }}
+            className="h-8 px-2 lg:px-3"
+          >
+            {t?.('common.reset')}
+            <RotateCcw className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {importContent && (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="h-8 w-full md:w-fit">
+              <Upload className="h-4 w-4" />
+              {t?.('common.import')}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-sm">{importContent}</DialogContent>
+        </Dialog>
+      )}
+
+      {exportContent && (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="ml-auto h-8 w-full md:w-fit"
+            >
+              <Download className="h-4 w-4" />
+              {t?.('common.export')}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-sm">{exportContent}</DialogContent>
+        </Dialog>
+      )}
+
+      <div className="grid w-full grid-cols-2 gap-2 md:flex md:w-fit">
+        {editContent && (
+          <DataTableCreateButton
+            newObjectTitle={newObjectTitle}
+            editContent={editContent}
+          />
+        )}
+        {hasData && (
+          <DataTableRefreshButton
+            onRefresh={onRefresh}
+            refreshText={t?.('common.refresh') || 'Refresh'}
+          />
+        )}
+        <DataTableViewOptions
+          t={t}
+          namespace={namespace}
+          table={table}
+          extraColumns={extraColumns}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { Button } from '../../button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '../../dropdown-menu';
+import { ScrollArea } from '../../scroll-area';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { Table } from '@tanstack/react-table';
+import { Settings2, UserCog } from 'lucide-react';
+import { Fragment } from 'react';
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+  extraColumns?: any[];
+  namespace: string | undefined;
+  t?: any;
+}
+
+export function DataTableViewOptions<TData>({
+  t,
+  namespace,
+  table,
+  extraColumns,
+}: DataTableViewOptionsProps<TData>) {
+  const isShowingAll = table
+    .getAllColumns()
+    .every((column) => column.getIsVisible());
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto h-8 w-full md:w-fit"
+        >
+          <Settings2 className="h-4 w-4" />
+          {t?.('common.view-options') || 'View Options'}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64">
+        <DropdownMenuLabel>
+          {t?.('common.toggle-columns') || 'Toggle Columns'}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <ScrollArea className="h-36">
+          {table
+            .getAllColumns()
+            .filter(
+              (column) =>
+                typeof column.accessorFn !== 'undefined' && column.getCanHide()
+            )
+            .map((column, idx) => {
+              return (
+                <Fragment key={column.id}>
+                  {/* If this item is the last system column before the extra
+                  columns start (if there is any), add a separator */}
+                  {extraColumns?.length &&
+                  extraColumns[0].id === column.id &&
+                  idx !== 0 ? (
+                    <DropdownMenuSeparator key={`${column.id}-separator`} />
+                  ) : null}
+
+                  <DropdownMenuCheckboxItem
+                    key={`${column.id}-checkbox`}
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) => column.toggleVisibility(value)}
+                  >
+                    {extraColumns?.some(
+                      (extraColumn) => extraColumn.id === column.id
+                    ) ? (
+                      <UserCog className="mr-1 h-4 w-4" />
+                    ) : undefined}
+
+                    {(extraColumns as Array<{ id: string; name?: string }>)
+                      ?.filter(
+                        (extraColumn: { id: string; name?: string }) =>
+                          extraColumn.id === column.id
+                      )
+                      .pop()?.name || namespace
+                      ? t?.(`${namespace}.${column.id}`)
+                      : column.id}
+                  </DropdownMenuCheckboxItem>
+                </Fragment>
+              );
+            })}
+        </ScrollArea>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>
+          <Button
+            className="w-full"
+            size="sm"
+            onClick={() => {
+              table
+                .getAllColumns()
+                .forEach((column) => column.toggleVisibility(!isShowingAll));
+            }}
+          >
+            {isShowingAll
+              ? t?.('common.hide-all') || 'Hide All'
+              : t?.('common.show-all') || 'Show All'}
+          </Button>
+        </DropdownMenuLabel>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}