feat: added columnDivider styling

schummar · Jul 18, 2023 · c4d59a3 · c4d59a3
1 parent 0c06e1c
commit c4d59a3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/docs/stories/aIntro.stories.tsx b/docs/stories/aIntro.stories.tsx
@@ -85,3 +85,19 @@ export const StyledCells = {
     },
   },
 };
+
+export const StyleColumnDivider = {
+  args: {
+    ...Primary.args,
+    enableSelection: false,
+    enableColumnSelection: false,
+    enableExport: false,
+    styles: {
+      columnDivider: {
+        '&:after': {
+          display: 'none',
+        },
+      },
+    },
+  },
+};
diff --git a/src/components/resizeHandle.tsx b/src/components/resizeHandle.tsx
@@ -1,5 +1,6 @@
-import type { HTMLProps } from 'react';
 import type React from 'react';
+import type { HTMLProps } from 'react';
+import { useTheme } from '../hooks/useTheme';
 import { useColumnContext, useTableContext } from '../misc/tableContext';
 
 export function ResizeHandle() {
@@ -60,23 +61,30 @@ export function ResizeHandleView({
   enabled,
   ...props
 }: HTMLProps<HTMLDivElement> & { enabled?: boolean }) {
+  const className = useTheme((theme) => theme.classes?.columnDivider);
+  const styles = useTheme((theme) => theme.styles?.columnDivider);
+
   return (
     <div
-      css={{
-        alignSelf: 'stretch',
-        padding: '0 5px',
-        cursor: enabled ? 'col-resize' : 'initial',
-        display: 'flex',
-        alignItems: 'center',
+      className={className}
+      css={[
+        {
+          alignSelf: 'stretch',
+          padding: '0 5px',
+          cursor: enabled ? 'col-resize' : 'initial',
+          display: 'flex',
+          alignItems: 'center',
 
-        '&:after': {
-          content: '""',
-          width: 1,
-          height: '1.5em',
-          background: '#c9cfda',
-          transition: 'transform 300ms',
+          '&:after': {
+            content: '""',
+            width: 1,
+            height: '1.5em',
+            background: '#c9cfda',
+            transition: 'transform 300ms',
+          },
         },
-      }}
+        styles,
+      ]}
       {...props}
     />
   );

diff --git a/src/types.ts b/src/types.ts
@@ -51,6 +51,7 @@ export interface TableTheme<T = unknown> {
     oddCell?: string;
     popover?: string;
     popoverBackdrop?: string;
+    columnDivider?: string;
   };
   styles?: {
     table?: CSSObject;
@@ -59,6 +60,7 @@ export interface TableTheme<T = unknown> {
     cell?: CSSObject | FunctionWithDeps<(item: T, index: number) => CSSObject>;
     evenCell?: CSSObject;
     oddCell?: CSSObject;
+    columnDivider?: CSSObject;
   };
   /** Define components to be used in the table. */
   components: {