feat(Grid): adds separator prop

Closes #264
innovaccer · Aug 20, 2020 · 9598aac · 9598aac
1 parent 518cacd
commit 9598aac
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git a/core/components/organisms/grid/Cell.tsx b/core/components/organisms/grid/Cell.tsx
@@ -276,12 +276,12 @@ export const Cell = (props: CellProps) => {
   } = props;
 
   const {
+    separator,
     nestedRows
   } = _this.props;
 
   const {
     name,
-    separator,
     hidden,
     pinned,
     cellType = 'DEFAULT'
@@ -297,7 +297,7 @@ export const Cell = (props: CellProps) => {
     'Grid-cell': true,
     'Grid-cell--head': head,
     'Grid-cell--body': !head,
-    'Grid-cell--separator': !firstCell && separator,
+    'Grid-cell--separator': !firstCell && (schema.separator !== undefined ? schema.separator : separator),
     'Grid-cell--nestedRow': !head && colIndex === 0 && nestedRows
   });
 

diff --git a/core/components/organisms/grid/Grid.tsx b/core/components/organisms/grid/Grid.tsx
@@ -263,6 +263,12 @@ export interface GridProps extends BaseProps {
    * Shows tooltip on Head Cell hover
    */
   headCellTooltip?: boolean;
+  /**
+   * Shows left separator to all columns
+   *
+   * **Can be override by Column Schema**
+   */
+  separator?: boolean;
 }
 
 export class Grid extends React.Component<GridProps> {

diff --git a/core/components/organisms/list/List.tsx b/core/components/organisms/list/List.tsx
@@ -39,6 +39,7 @@ interface SharedListProps extends BaseProps {
   onSelect?: TableProps['onSelect'];
   onPageChange?: TableProps['onPageChange'];
   headCellTooltip?: TableProps['headCellTooltip'];
+  separator?: TableProps['separator'];
 }
 
 type SyncListProps = SyncProps & SharedListProps;

diff --git a/core/components/organisms/list/__stories__/index.story.tsx b/core/components/organisms/list/__stories__/index.story.tsx
@@ -93,6 +93,11 @@ export const all = () => {
     false
   );
 
+  const separator = boolean(
+    'separator',
+    false
+  );
+
   let dataAttr = {};
   if (async) {
     dataAttr = {
@@ -123,6 +128,7 @@ export const all = () => {
           type={type}
           size={size}
           headCellTooltip={headCellTooltip}
+          separator={separator}
           withPagination={withPagination}
           paginationType={paginationType}
           pageSize={pageSize}

diff --git a/core/components/organisms/table/Table.tsx b/core/components/organisms/table/Table.tsx
@@ -275,7 +275,13 @@ interface SharedTableProps extends BaseProps {
   /**
    * Shows tooltip on Head Cell hover
    */
-  headCellTooltip?: boolean;
+  headCellTooltip?: GridProps['headCellTooltip'];
+  /**
+   * Shows left separator to all columns
+   *
+   * **Can be override by Column Schema**
+   */
+  separator?: GridProps['headCellTooltip'];
 }
 
 const defaultProps = {
@@ -565,6 +571,7 @@ export class Table extends React.Component<TableProps, TableState> {
       type,
       size,
       headCellTooltip,
+      separator,
       draggable,
       nestedRows,
       nestedRowRenderer,
@@ -633,6 +640,7 @@ export class Table extends React.Component<TableProps, TableState> {
             type={type}
             size={size}
             headCellTooltip={headCellTooltip}
+            separator={separator}
             draggable={draggable}
             nestedRows={nestedRows}
             nestedRowRenderer={nestedRowRenderer}

diff --git a/core/components/organisms/table/__stories__/index.story.tsx b/core/components/organisms/table/__stories__/index.story.tsx
@@ -111,6 +111,11 @@ export const all = () => {
     false
   );
 
+  const separator = boolean(
+    'separator',
+    false
+  );
+
   let dataAttr = {};
   if (async) {
     dataAttr = {
@@ -147,6 +152,7 @@ export const all = () => {
           type={type}
           size={size}
           headCellTooltip={headCellTooltip}
+          separator={separator}
           draggable={draggable}
           nestedRows={nestedRows}
           nestedRowRenderer={nestedRowRenderer}