[Table] Add isActive prop to TableRow (#472)

ClickHouse · Sep 9, 2024 · b999ad4 · b999ad4
1 parent ddd0405
commit b999ad4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -18,6 +18,24 @@ const rows = [
       { label: "Mexico" },
     ],
   },
+  {
+    id: "row-3",
+    isActive: true,
+    items: [
+      { label: "Alfreds Futterkiste" },
+      { label: "Maria Anders" },
+      { label: "Germany" },
+    ],
+  },
+  {
+    id: "row-4",
+    isDeleted: true,
+    items: [
+      { label: "Centro comercial Moctezuma" },
+      { label: "Francisco Chang" },
+      { label: "Mexico" },
+    ],
+  },
 ];
 
 export default {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -156,18 +156,23 @@ interface TableRowProps {
   $isSelectable?: boolean;
   $isDeleted?: boolean;
   $isDisabled?: boolean;
+  $isActive?: boolean;
   $showActions?: boolean;
   $rowHeight?: string;
 }
 
 const TableRow = styled.tr<TableRowProps>`
   overflow: hidden;
-  ${({ theme, $isDeleted, $isDisabled, $rowHeight }) => `
+  ${({ theme, $isDeleted, $isDisabled, $isActive, $rowHeight }) => `
     ${$rowHeight ? `height: ${$rowHeight};` : ""}
     background-color: ${theme.click.table.row.color.background.default};
     border-bottom: ${theme.click.table.cell.stroke} solid ${
-    theme.click.table.row.color.stroke.default
-  };
+      theme.click.table.row.color.stroke.default
+    };
+
+    ${$isActive &&
+      `background-color: ${theme.click.table.row.color.background.active};`}
+
     &:active {
       background-color: ${theme.click.table.row.color.background.active};
     }
@@ -366,6 +371,7 @@ export interface TableRowType
   items: Array<TableCellType>;
   isDisabled?: boolean;
   isDeleted?: boolean;
+  isActive?: boolean;
 }
 
 interface CommonTableProps
@@ -422,6 +428,7 @@ const TableBodyRow = ({
   onDelete,
   onEdit,
   isDeleted,
+  isActive,
   isDisabled,
   size,
   actionsList,
@@ -435,6 +442,7 @@ const TableBodyRow = ({
       $isSelectable={isSelectable}
       $isDeleted={isDeleted}
       $isDisabled={isDisabled}
+      $isActive={isActive}
       $showActions={isDeletable || isEditable}
       $rowHeight={rowHeight}
       {...rowProps}