import { useIntl } from 'react-intl';
import TableCell from './TableCell';
import TableHeader, { TableHeaderType } from './TableHeader';
import TableRow, { TableRowClickableType, TableRowType } from './TableRow';
import Alert from '../alert';
import messages from './Table.messages';
import Loader from '../loader';
import { Sentiment, Size } from '../common';
import StatusIcon from '../statusIcon';
import { clsx } from 'clsx';
import { useTheme } from '@wise/components-theming';
import Body from '../body';
export interface TableProps {
'aria-labelledby'?: string;
data: {
headers?: TableHeaderType[];
rows?: TableRowType[] | TableRowClickableType[];
onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
};
loading?: boolean;
className?: string | undefined;
fullWidth?: boolean;
error?: {
message?: string;
action?: {
href?: string;
text?: string;
};
};
}
const Table = ({
'aria-labelledby': ariaLabelledBy,
data,
loading,
className,
fullWidth = true,
error,
}: TableProps) => {
const { formatMessage } = useIntl();
const { theme } = useTheme();
const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
const getRowLength = () => {
const columnsLength = data?.headers?.length ?? 0;
return data?.onRowClick ? columnsLength + 1 : columnsLength;
};
const getTableContent = () => {
if (loading) {
return (
);
}
// Shows the `emptyData` message when there is no data to display
if (!data?.rows?.length) {
return (
{formatMessage(messages.emptyData)}
);
}
return data?.rows?.map((rowData, rowIndex) => {
return (
);
});
};
if (error) {
return (
);
}
return (
<>
{formatMessage(messages[loading ? 'loading' : 'loaded'])}
{isEmptyHeader ? (
) : (
data?.headers?.map((headerItem: TableHeaderType, index) => (
))
)}
{data?.onRowClick && }
|
{getTableContent()}
|
);
};
export default Table;