diff --git a/src/stories/table/Table.stories.tsx b/src/stories/table/Table.stories.tsx index c16c188..46c5a00 100644 --- 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 index f22de41..f8d5ee7 100644 --- 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) => ( -
{ + const data = dataRow[col.dataIndex]; + const style = + typeof data === "object" && "style" in data ? data.style : {}; + return ( +
- -
- ))} + `} + style={style} + key={`${dataRow.key}-${col.key}`} + > + +
+ ); + })} ); diff --git a/src/stories/table/_types.ts b/src/stories/table/_types.ts index dc87fb4..27c7f70 100644 --- 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