Add custom styles to table component

manawiki · Sep 19, 2024 · 68aedb8 · 68aedb8
1 parent 44de6a3
commit 68aedb8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/app/routes/_site+/c_+/_components/GridView.tsx b/app/routes/_site+/c_+/_components/GridView.tsx
@@ -1,13 +1,31 @@
 import { type Table as TableType, flexRender } from "@tanstack/react-table";
+import clsx from "clsx";
 
-export function GridView({ table }: { table: TableType<any> }) {
+export function GridView({
+   table,
+   gridCellClassNames,
+   gridContainerClassNames,
+}: {
+   table: TableType<any>;
+   gridCellClassNames?: string;
+   gridContainerClassNames?: string;
+}) {
    return (
-      <div className="grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-4  gap-3">
+      <div
+         className={clsx(
+            gridContainerClassNames
+               ? gridContainerClassNames
+               : "grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-4 gap-3",
+         )}
+      >
          {table.getRowModel().rows.map((row) => {
             return (
                <div
-                  className="p-2 dark:hover:border-zinc-600 border rounded-md bg-zinc-50 truncate
-                  dark:bg-dark350 border-color-sub shadow-sm dark:shadow-zinc-800/80 hover:border-zinc-300"
+                  className={clsx(
+                     gridCellClassNames
+                        ? gridCellClassNames
+                        : "p-2 dark:hover:border-zinc-600 border rounded-md bg-zinc-50 truncate dark:bg-dark350 border-color-sub shadow-sm dark:shadow-zinc-800/80 hover:border-zinc-300",
+                  )}
                   key={row.id}
                >
                   {flexRender(

diff --git a/app/routes/_site+/c_+/_components/ListFilters.tsx b/app/routes/_site+/c_+/_components/ListFilters.tsx
@@ -257,8 +257,9 @@ export function ListFilters({
                                              <div className="flex items-center gap-2">
                                                 {option?.icon && (
                                                    <Avatar
+                                                      square
                                                       className="size-5"
-                                                      options="height=20&width=20"
+                                                      options="height=40&width=40"
                                                       src={option?.icon}
                                                    />
                                                 )}

diff --git a/app/routes/_site+/c_+/_components/ListTable.tsx b/app/routes/_site+/c_+/_components/ListTable.tsx
@@ -33,16 +33,20 @@ export function ListTable({
    gridView,
    defaultSort,
    searchPlaceholder,
+   gridCellClassNames,
+   gridContainerClassNames,
 }: {
    data: any;
-   columns: AccessorKeyColumnDefBase<any>[];
+   columns: AccessorKeyColumnDefBase<any>[] | any;
    collection?: Collection;
    columnViewability?: VisibilityState;
    defaultViewType?: "list" | "grid";
-   filters?: TableFilters;
+   filters?: TableFilters | any;
    gridView?: AccessorKeyColumnDef<any>;
    defaultSort?: SortingState;
    searchPlaceholder?: string;
+   gridCellClassNames?: string;
+   gridContainerClassNames?: string;
 }) {
    // Table state definitions
    const [tableData] = useState(() => [...data?.listData?.docs]);
@@ -104,7 +108,11 @@ export function ListTable({
          {viewMode === "list" ? (
             <ListView table={table} />
          ) : (
-            <GridView table={table} />
+            <GridView
+               table={table}
+               gridCellClassNames={gridCellClassNames}
+               gridContainerClassNames={gridContainerClassNames}
+            />
          )}
          <ListPager table={table} />
       </>