[@mantine/core] Table: add withBorder and withColumnBorders props (#2519

)
mantinedev · Sep 24, 2022 · 0a52d01 · 0a52d01
1 parent fbdd430
commit 0a52d01
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 64 deletions.
diff --git a/src/mantine-core/src/Table/Table.story.tsx b/src/mantine-core/src/Table/Table.story.tsx
@@ -12,16 +12,16 @@ const elements = [
   { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
 ];
 
-export function Usage() {
-  const rows = elements.map((element) => (
-    <tr key={element.name}>
-      <td>{element.position}</td>
-      <td>{element.name}</td>
-      <td>{element.symbol}</td>
-      <td>{element.mass}</td>
-    </tr>
-  ));
+const rows = elements.map((element) => (
+  <tr key={element.name}>
+    <td>{element.position}</td>
+    <td>{element.name}</td>
+    <td>{element.symbol}</td>
+    <td>{element.mass}</td>
+  </tr>
+));
 
+export function Usage() {
   return (
     <MantineProvider inherit theme={{ spacing: { xs: 0, sm: 2, md: 4, lg: 8, xl: 12 } }}>
       <div style={{ padding: 40 }}>
@@ -40,3 +40,39 @@ export function Usage() {
     </MantineProvider>
   );
 }
+
+export function WithBorder() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Table withBorder>
+        <thead>
+          <tr>
+            <th>Element position</th>
+            <th>Element name</th>
+            <th>Symbol</th>
+            <th>Atomic mass</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </div>
+  );
+}
+
+export function withColumnBorders() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Table withColumnBorders>
+        <thead>
+          <tr>
+            <th>Element position</th>
+            <th>Element name</th>
+            <th>Symbol</th>
+            <th>Atomic mass</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Table/Table.styles.ts b/src/mantine-core/src/Table/Table.styles.ts
@@ -5,70 +5,88 @@ export interface TableStylesParams {
   horizontalSpacing: MantineNumberSize;
   verticalSpacing: MantineNumberSize;
   fontSize: MantineNumberSize;
+  withBorder: boolean;
+  withColumnBorders: boolean;
 }
 
 export default createStyles(
-  (theme, { captionSide, horizontalSpacing, verticalSpacing, fontSize }: TableStylesParams) => ({
-    root: {
-      ...theme.fn.fontStyles(),
-      width: '100%',
-      borderCollapse: 'collapse',
+  (
+    theme,
+    {
       captionSide,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      lineHeight: theme.lineHeight,
+      horizontalSpacing,
+      verticalSpacing,
+      fontSize,
+      withBorder,
+      withColumnBorders,
+    }: TableStylesParams
+  ) => {
+    const border = `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+    }`;
+    return {
+      root: {
+        ...theme.fn.fontStyles(),
+        width: '100%',
+        borderCollapse: 'collapse',
+        captionSide,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        lineHeight: theme.lineHeight,
+        border: withBorder ? border : '',
 
-      '& caption': {
-        marginTop: captionSide === 'top' ? 0 : theme.spacing.xs,
-        marginBottom: captionSide === 'bottom' ? 0 : theme.spacing.xs,
-        fontSize: theme.fontSizes.sm,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      },
+        '& caption': {
+          marginTop: captionSide === 'top' ? 0 : theme.spacing.xs,
+          marginBottom: captionSide === 'bottom' ? 0 : theme.spacing.xs,
+          fontSize: theme.fontSizes.sm,
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+        },
 
-      '& thead tr th, & tfoot tr th': {
-        textAlign: 'left',
-        fontWeight: 'bold',
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-        fontSize: theme.fn.size({ size: fontSize, sizes: theme.fontSizes }),
-        padding: `${theme.fn.size({
-          size: verticalSpacing,
-          sizes: theme.spacing,
-        })}px ${theme.fn.size({ size: horizontalSpacing, sizes: theme.spacing })}px`,
-      },
+        '& thead tr th, & tfoot tr th': {
+          textAlign: 'left',
+          fontWeight: 'bold',
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+          fontSize: theme.fn.size({ size: fontSize, sizes: theme.fontSizes }),
+          padding: `${theme.fn.size({
+            size: verticalSpacing,
+            sizes: theme.spacing,
+          })}px ${theme.fn.size({ size: horizontalSpacing, sizes: theme.spacing })}px`,
+        },
 
-      '& thead tr th': {
-        borderBottom: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-      },
+        '& thead tr th': {
+          borderBottom: border,
+        },
 
-      '& tfoot tr th': {
-        borderTop: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-      },
+        '& tfoot tr th': {
+          borderTop: border,
+        },
 
-      '& tbody tr td': {
-        padding: `${theme.fn.size({
-          size: verticalSpacing,
-          sizes: theme.spacing,
-        })}px ${theme.fn.size({ size: horizontalSpacing, sizes: theme.spacing })}px`,
-        borderBottom: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-        fontSize: theme.fn.size({ size: fontSize, sizes: theme.fontSizes }),
-      },
+        '& tbody tr td': {
+          padding: `${theme.fn.size({
+            size: verticalSpacing,
+            sizes: theme.spacing,
+          })}px ${theme.fn.size({ size: horizontalSpacing, sizes: theme.spacing })}px`,
+          borderBottom: border,
+          fontSize: theme.fn.size({ size: fontSize, sizes: theme.fontSizes }),
+        },
 
-      '& tbody tr:last-of-type td': {
-        borderBottom: 'none',
-      },
+        '& tbody tr:last-of-type td': {
+          borderBottom: 'none',
+        },
 
-      '&[data-striped] tbody tr:nth-of-type(odd)': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-      },
+        '& th + th, & td + td': {
+          borderLeft: withColumnBorders ? border : '',
+        },
 
-      '&[data-hover] tbody tr': theme.fn.hover({
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-      }),
-    },
-  })
+        '&[data-striped] tbody tr:nth-of-type(odd)': {
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        },
+
+        '&[data-hover] tbody tr': theme.fn.hover({
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+        }),
+      },
+    };
+  }
 );
diff --git a/src/mantine-core/src/Table/Table.tsx b/src/mantine-core/src/Table/Table.tsx
@@ -23,6 +23,12 @@ export interface TableProps
 
   /** Sets font size of all text inside table */
   fontSize?: MantineNumberSize;
+
+  /** Add border to table */
+  withBorder?: boolean;
+
+  /** Add border to columns */
+  withColumnBorders?: boolean;
 }
 
 const defaultProps: Partial<TableProps> = {
@@ -32,6 +38,8 @@ const defaultProps: Partial<TableProps> = {
   horizontalSpacing: 'xs',
   fontSize: 'sm',
   verticalSpacing: 7,
+  withBorder: false,
+  withColumnBorders: false,
 };
 
 export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
@@ -45,11 +53,13 @@ export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
     verticalSpacing,
     fontSize,
     unstyled,
+    withBorder,
+    withColumnBorders,
     ...others
   } = useComponentDefaultProps('Table', defaultProps, props);
 
   const { classes, cx } = useStyles(
-    { captionSide, verticalSpacing, horizontalSpacing, fontSize },
+    { captionSide, verticalSpacing, horizontalSpacing, fontSize, withBorder, withColumnBorders },
     { unstyled, name: 'Table' }
   );
 

diff --git a/src/mantine-demos/src/demos/core/Table/Table.demo.configurator.tsx b/src/mantine-demos/src/demos/core/Table/Table.demo.configurator.tsx
@@ -46,5 +46,7 @@ export const configurator: MantineDemo = {
   configurator: [
     { name: 'striped', type: 'boolean', defaultValue: false },
     { name: 'highlightOnHover', type: 'boolean', defaultValue: false },
+    { name: 'withBorder', type: 'boolean', defaultValue: false },
+    { name: 'withColumnBorders', type: 'boolean', defaultValue: false },
   ],
 };