import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit'; import classNames from 'classnames'; import { forwardRef, type ReactNode, type HTMLAttributes } from 'react'; export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500'; export const GRADIENT = 'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent'; type TableColumnDefinition = { displayName?: ReactNode; name: string; tooltip?: string; className?: string; headerClassName?: string; testId?: string; }; type DataEntry = { [key: TableColumnDefinition['name']]: ReactNode; className?: string; }; type TableProps = { columns: TableColumnDefinition[]; data: DataEntry[]; noHeader?: boolean; noCollapse?: boolean; onRowClick?: (index: number) => void; }; const INNER_BORDER_STYLE = `border-b ${BORDER_COLOR}`; export const Table = forwardRef< HTMLTableElement, TableProps & HTMLAttributes >( ( { columns, data, noHeader = false, noCollapse = false, className, onRowClick, ...props }, ref ) => { const header = ( {columns.map(({ displayName, name, tooltip, headerClassName }) => ( {displayName} {tooltip ? ( ) : null} ))} ); return ( {!noHeader && header} {data.map((dataEntry, i) => ( { if (onRowClick) { onRowClick(i); } }} > {columns.map(({ name, displayName, className, testId }, j) => ( ))} ))}
{/** display column name in mobile view */} {!noCollapse && !noHeader && displayName && ( {displayName} )} {dataEntry[name]}
); } ); Table.displayName = 'Table';