diff --git a/frontend-components/tables/src/App.tsx b/frontend-components/tables/src/App.tsx index 13708f380a3..f49c515d305 100644 --- a/frontend-components/tables/src/App.tsx +++ b/frontend-components/tables/src/App.tsx @@ -80,6 +80,13 @@ function App() { title={title} data={transformedData.data} columns={transformedData.columns} + initialTheme={ + data.theme && + typeof data.theme === "string" && + data.theme === "dark" + ? "dark" + : "light" + } /> )} diff --git a/frontend-components/tables/src/components/Table/index.tsx b/frontend-components/tables/src/components/Table/index.tsx index f251c15acfb..4443b4cd988 100644 --- a/frontend-components/tables/src/components/Table/index.tsx +++ b/frontend-components/tables/src/components/Table/index.tsx @@ -94,12 +94,22 @@ function getCellWidth(row, column) { } } -export default function Table({ data, columns, title }: any) { // source = "" - const [colorTheme, setTheme] = useDarkMode(); +export default function Table({ + data, + columns, + title, + initialTheme, +}: { + data: any[]; + columns: any[]; + title: string; + initialTheme: "light" | "dark"; +}) { + const [colorTheme, setTheme] = useDarkMode(initialTheme); const [darkMode, setDarkMode] = useState( - colorTheme === "light" ? true : false + colorTheme === "dark" ? true : false ); - const toggleDarkMode = (checked) => { + const toggleDarkMode = (checked: boolean) => { setTheme(colorTheme); setDarkMode(checked); }; @@ -553,7 +563,10 @@ export default function Table({ data, columns, title }: any) { // source = ""