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 };