diff --git a/packages/wow-ui/src/components/Table/Table.stories.tsx b/packages/wow-ui/src/components/Table/Table.stories.tsx
index f50d6f12..cadcc443 100644
--- a/packages/wow-ui/src/components/Table/Table.stories.tsx
+++ b/packages/wow-ui/src/components/Table/Table.stories.tsx
@@ -94,7 +94,7 @@ export const Primary: Story = {
{data.map(({ name, studyId, id }) => {
return (
-
+
{name}
{studyId}
diff --git a/packages/wow-ui/src/components/Table/TableContext.ts b/packages/wow-ui/src/components/Table/TableContext.ts
index c9a9733b..4ac80247 100644
--- a/packages/wow-ui/src/components/Table/TableContext.ts
+++ b/packages/wow-ui/src/components/Table/TableContext.ts
@@ -1,8 +1,7 @@
import type { Dispatch } from "react";
-import { createContext } from "react";
+import { createContext, useContext } from "react";
import type { TableProps } from "@/components/Table/Table";
-import useSafeContext from "@/hooks/useSafeContext";
import type useTableCheckState from "@/hooks/useTableCheckState";
export const TableContext = createContext<
@@ -15,8 +14,20 @@ export const TableContext = createContext<
>(null);
export const useTableContext = () => {
- const context = useSafeContext(TableContext);
- return context;
+ const context = useContext(TableContext);
+ if (!context)
+ return {
+ selectedRows: new Set(),
+ showCheckbox: false,
+ rowValues: new Set(),
+ handleRowCheckboxChange: () => {},
+ handleHeaderCheckboxChange: () => {},
+ setRowValues: () => {},
+ rowValue: 0,
+ };
+ else {
+ return context;
+ }
};
export const TableCheckedContext = createContext(0);
diff --git a/packages/wow-ui/src/components/Table/Td.tsx b/packages/wow-ui/src/components/Table/Td.tsx
index 9779cc9e..3f0ac81b 100644
--- a/packages/wow-ui/src/components/Table/Td.tsx
+++ b/packages/wow-ui/src/components/Table/Td.tsx
@@ -1,13 +1,12 @@
import { cva } from "@styled-system/css";
import { styled } from "@styled-system/jsx";
import type { CSSProperties, PropsWithChildren, Ref } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useContext, useEffect, useState } from "react";
import {
TableCheckedContext,
useTableContext,
} from "@/components/Table/TableContext";
-import useSafeContext from "@/hooks/useSafeContext";
interface TableCellProps extends PropsWithChildren {
style?: CSSProperties;
@@ -18,8 +17,15 @@ const Td = forwardRef(
(props: TableCellProps, ref: Ref) => {
const { children, ...rest } = props;
const { selectedRows } = useTableContext();
- const rowValue = useSafeContext(TableCheckedContext);
- const isSelected = selectedRows.has(rowValue);
+ const [isSelected, setIsSelected] = useState(false);
+
+ const rowValue = useContext(TableCheckedContext);
+ useEffect(() => {
+ if (rowValue) {
+ const value = selectedRows.has(rowValue);
+ setIsSelected(value);
+ }
+ }, [rowValue, selectedRows]);
return (