diff --git a/packages/common/components/src/ui/table/index.tsx b/packages/common/components/src/ui/table/index.tsx index 83be366fd..45bc9949b 100644 --- a/packages/common/components/src/ui/table/index.tsx +++ b/packages/common/components/src/ui/table/index.tsx @@ -79,12 +79,31 @@ const TableRow = React.forwardRef< )); TableRow.displayName = "TableRow"; -const TableHead = React.forwardRef< - HTMLTableCellElement, - React.ThHTMLAttributes ->(({ className, ...props }, ref) => ( - -)); +type TableHeadProps = React.ThHTMLAttributes & { + "data-required"?: boolean | string; +}; + +const TableHead = React.forwardRef( + ({ children, className, ...props }, ref) => { + const isRequired = props["data-required"] !== undefined; + + return ( + + {children} + {isRequired && ( + + (*) + + )} + + ); + }, +); TableHead.displayName = "TableHead"; const TableCell = React.forwardRef< diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css index 2a0897d39..e54b73869 100644 --- a/packages/common/components/src/ui/table/table.css +++ b/packages/common/components/src/ui/table/table.css @@ -7,9 +7,8 @@ .table-ui th { @apply px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2]; } - .table-ui th[data-required]::before { - content: "*"; - color: red; + .table-ui th[data-required] .table-required-marker { + @apply ml-1 text-red-600; } .table-ui td { @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];