diff --git a/src/Table/index.tsx b/src/Table/index.tsx index cabf08a..893ffb6 100644 --- a/src/Table/index.tsx +++ b/src/Table/index.tsx @@ -2,6 +2,8 @@ import React, { createContext, useContext } from "react"; import classes from "../utils/classes"; import { CellProps, RowProps, TableProps } from "./types"; import themeDefault from "./style/Default.module.scss"; +import Tooltip from "../Tooltip"; + const TableContext = createContext({}); @@ -31,8 +33,21 @@ export default function Table({ // TABLE HEADINGS // Hide column title if the item has an action (action button) or the title starts with underscore const modelDatum = data?.[0]; - const thead: any = modelDatum ? Object.keys(modelDatum).map((k) => (k.indexOf("_") === 0 ? "" : k)) : {}; + const thead: any = modelDatum + ? Object.keys(modelDatum).map((k) => { + const value = modelDatum[k]; + + if (k.indexOf("_") === 0) { + return ""; + } + + if (typeof value === 'object' && value?.captionInfo) { + return { key: k, captionInfo: value.captionInfo }; + } + return k; + }) + : {}; const context = { style, highlightColumns, @@ -75,11 +90,10 @@ export default function Table({ ); } -const Row = ({ datum, onClick }: RowProps) => { +const Row = ({ datum, onClick, isHeading }: RowProps) => { const { style, highlightColumns, hideColumns, columnWidths, columnAlignments } = useContext(TableContext); const className = classes([style?.tr]); - return (
onClick?.(datum)}> {Object.keys(datum) @@ -89,9 +103,11 @@ const Row = ({ datum, onClick }: RowProps) => { // datum[k] is the content for the cell // If it is an object with the 'content' property, use that as content (can be JSX or a primitive) // Another 'raw' property with a primitive value is used to sort and search - const content = (datum[k] as any)?.content || datum[k]; + let content = (datum[k] as any)?.content || datum[k]; const tooltip = (datum[k] as any)?.tooltip; - + const captionInfo = isHeading ? (datum[k] as any)?.captionInfo : null; + const headingKey = isHeading ? (datum[k] as any)?.key : null; + content = isHeading && captionInfo ? {headingKey} : content; const wrappedContent = content && typeof content === "string" ? {content} : content; const cellClass = classes([ @@ -121,4 +137,4 @@ const Cell = ({ children, cellClass, cellStyle, tooltip }: CellProps) => { ...(tooltip ? { title: tooltip } : {}), }; return
{children}
; -}; +}; \ No newline at end of file diff --git a/src/Table/storyData.ts b/src/Table/storyData.ts index 475c4ba..fe63108 100644 --- a/src/Table/storyData.ts +++ b/src/Table/storyData.ts @@ -1,7 +1,11 @@ const storyData = [ { id: 1, - Name: "John Doe", + Name: { + raw: "John Doe", + content: "John Doe", + captionInfo: "This is a caption example", + }, Age: 25, Email: "john.doe@example.com", }, diff --git a/src/Table/types/index.ts b/src/Table/types/index.ts index 0a177cd..0e3ee43 100644 --- a/src/Table/types/index.ts +++ b/src/Table/types/index.ts @@ -8,6 +8,7 @@ export type TableComposite = { raw: Primitive; content: Primitive | React.ReactElement; tooltip?: string; + captionInfo?: string; }; export type TableValue = Primitive | TableComposite;