feat(table): Allow custom style for cell

AppQuality · Mar 9, 2023 · 8c1d40e · 8c1d40e
1 parent 96c6eaf
commit 8c1d40e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/src/stories/table/Table.stories.tsx b/src/stories/table/Table.stories.tsx
@@ -66,3 +66,40 @@ TableAlternative.args = {
   highlightedColor: "#7986D81A",
   hideHeader: false,
 };
+
+export const TemplateWithCustomStyle = Template.bind({});
+TemplateWithCustomStyle.args = {
+  dataSource: [
+    {
+      key: "1",
+      cell1: {
+        title: "Cell 1",
+        content: "Cell 1",
+        style: { backgroundColor: "red" },
+      },
+      cell2: "Cell 2",
+    },
+    {
+      key: "1",
+      cell1: "Cell 1",
+      cell2: {
+        title: "Cell 2",
+        content: "Cell 2",
+        style: { backgroundColor: "red", color: "white" },
+      },
+    },
+  ],
+  columns: [
+    {
+      title: "Cell 1",
+      dataIndex: "cell1",
+      key: "cell1",
+    },
+    {
+      title: "Cell 2",
+      dataIndex: "cell2",
+      key: "cell2",
+    },
+  ],
+  isLoading: false,
+};
diff --git a/src/stories/table/TableRow.tsx b/src/stories/table/TableRow.tsx
@@ -151,18 +151,24 @@ export const TableRow = ({
 
   const BasicRow = () => (
     <>
-      {columns.map((col, i) => (
-        <div
-          className={`${className} tbody cell ${
-            col.borderedCell ? "borderedCell" : ""
-          } ${dataRow.highlighted && !col.borderedCell ? "highlighted" : ""}
+      {columns.map((col, i) => {
+        const data = dataRow[col.dataIndex];
+        const style =
+          typeof data === "object" && "style" in data ? data.style : {};
+        return (
+          <div
+            className={`${className} tbody cell ${
+              col.borderedCell ? "borderedCell" : ""
+            } ${dataRow.highlighted && !col.borderedCell ? "highlighted" : ""}
             ${columns.length - 1 === i ? "lastRowCell" : ""}
-          `}
-          key={`${dataRow.key}-${col.key}`}
-        >
-          <Cell data={dataRow[col.dataIndex]} col={col} />
-        </div>
-      ))}
+            `}
+            style={style}
+            key={`${dataRow.key}-${col.key}`}
+          >
+            <Cell data={dataRow[col.dataIndex]} col={col} />
+          </div>
+        );
+      })}
     </>
   );
 

diff --git a/src/stories/table/_types.ts b/src/stories/table/_types.ts
@@ -28,6 +28,7 @@ export interface Column {
 interface ObjectData {
   title?: string;
   content?: Data;
+  style?: React.CSSProperties;
 }
 export type Data =
   | ObjectData