diff --git a/src/base/Table/Table.tsx b/src/base/Table/Table.tsx index e54e41cfc..5e96fd802 100644 --- a/src/base/Table/Table.tsx +++ b/src/base/Table/Table.tsx @@ -1,7 +1,52 @@ import { Table as MuiTable, type TableProps as MuiTableProps } from '@mui/material'; +import { styled } from '@mui/material/styles'; -export function Table(props: MuiTableProps): JSX.Element { +export interface TableProps extends MuiTableProps { + children?: React.ReactNode; +} + +export function Table(props: TableProps): JSX.Element { return ; } +const BorderedTableStyled = styled(MuiTable)(({ theme }) => ({ + borderCollapse: 'separate', + borderSpacing: '0', + border: `1px solid ${theme.palette.divider}`, + '& .MuiTableCell-root': { + borderRight: `1px solid ${theme.palette.divider}`, + '&:last-child': { + borderRight: 'none' + } + } +})); + +const StripedTableStyled = styled(MuiTable)(({ theme }) => ({ + borderCollapse: 'separate', + borderSpacing: '0', + '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)': { + backgroundColor: theme.palette.action.hover + } +})); + +const CompactTableStyled = styled(MuiTable)(({ theme }) => ({ + borderCollapse: 'separate', + borderSpacing: '0', + '& .MuiTableCell-root': { + padding: theme.spacing(0.5, 1) + } +})); + +export const BorderedTable = (props: TableProps): JSX.Element => ( + {props.children} +); + +export const StripedTable = (props: TableProps): JSX.Element => ( + {props.children} +); + +export const CompactTable = (props: TableProps): JSX.Element => ( + {props.children} +); + export default Table; diff --git a/src/base/Table/index.tsx b/src/base/Table/index.tsx index 3280c0259..77838bef1 100644 --- a/src/base/Table/index.tsx +++ b/src/base/Table/index.tsx @@ -1,5 +1,3 @@ -import { TableProps } from '@mui/material'; import Table from './Table'; export { Table }; -export type { TableProps };