diff --git a/apps/console/src/pages/organizations/assets/AssetsPage.tsx b/apps/console/src/pages/organizations/assets/AssetsPage.tsx index 988f5cc9e..6ca7e340f 100644 --- a/apps/console/src/pages/organizations/assets/AssetsPage.tsx +++ b/apps/console/src/pages/organizations/assets/AssetsPage.tsx @@ -18,6 +18,7 @@ import { DataTable, CellHead, Cell, + Row, } from "@probo/ui"; import { useTranslate } from "@probo/i18n"; import { usePageTitle } from "@probo/hooks"; @@ -145,13 +146,15 @@ export default function AssetsPage(props: Props) { )} - - {__("Name")} - {__("Type")} - {__("Amount")} - {__("Owner")} - {__("Vendors")} - + + + {__("Name")} + {__("Type")} + {__("Amount")} + {__("Owner")} + {__("Vendors")} + + {assets.map((entry) => ( ))} @@ -196,7 +199,7 @@ function AssetRow({ }; return ( - <> + )} - + ); } diff --git a/packages/ui/src/Atoms/DataTable/DataTable.tsx b/packages/ui/src/Atoms/DataTable/DataTable.tsx index 46b6e6a1d..6c0d0b79f 100644 --- a/packages/ui/src/Atoms/DataTable/DataTable.tsx +++ b/packages/ui/src/Atoms/DataTable/DataTable.tsx @@ -42,8 +42,8 @@ export function CellHead({
@@ -52,6 +52,10 @@ export function CellHead({ ); } +export function Row(props: ComponentPropsWithRef<"div">) { + return
; +} + export function Cell({ asChild, ...props @@ -62,7 +66,7 @@ export function Cell({ data-cell {...props} className={clsx( - "py-3 px-6 text-sm text-txt-primary bg-tertiary border-t border-border-low flex flex-col justify-center", + "first:pl-6 p-3 text-sm text-txt-primary bg-tertiary border-t border-border-low flex flex-col justify-center", props.className, )} /> diff --git a/packages/ui/src/Atoms/Select/Select.tsx b/packages/ui/src/Atoms/Select/Select.tsx index 0d434cb00..5cd3830e2 100644 --- a/packages/ui/src/Atoms/Select/Select.tsx +++ b/packages/ui/src/Atoms/Select/Select.tsx @@ -16,6 +16,7 @@ import { tv } from "tailwind-variants"; import { Children, type ComponentProps, + type CSSProperties, type PropsWithChildren, type ReactNode, } from "react"; @@ -36,6 +37,8 @@ type Props = PropsWithChildren< onSearch?: (s: string) => void; searchPlaceholder?: string; loading?: boolean; + style?: CSSProperties; + dropdownProps?: ComponentProps; } & Omit, "onChange" | "value"> >; @@ -108,6 +111,7 @@ export function Select({ open, defaultOpen = false, onOpenChange, + dropdownProps, ...props }: Props) { const { trigger, content, icon } = select({ @@ -140,7 +144,6 @@ export function Select({ ({ maxHeight: "var(--radix-select-content-available-height)", }} + {...dropdownProps} + className={content({ className: dropdownProps?.className })} > {onSearch && ( {type === "select" && ( <> diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8ded0719b..8d302b25b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -38,7 +38,7 @@ export { InfiniteScrollTrigger } from "./Atoms/InfiniteScrollTrigger/InfiniteScr export { PriorityLevel } from "./Atoms/PriorityLevel/PriorityLevel.tsx"; export { TaskStateIcon } from "./Atoms/Icons/TaskStateIcon"; export { Checkbox } from "./Atoms/Checkbox/Checkbox"; -export { DataTable, Cell, CellHead } from "./Atoms/DataTable/DataTable"; +export { DataTable, Cell, CellHead, Row } from "./Atoms/DataTable/DataTable"; // Molecules export {