feat(Grid): adds column width percent support

Closes #230
innovaccer · Aug 17, 2020 · f362227 · f362227
1 parent 58171e6
commit f362227
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 18 deletions.
diff --git a/core/components/organisms/grid/Cell.tsx b/core/components/organisms/grid/Cell.tsx
@@ -5,7 +5,7 @@ import { Dropdown, Grid, Placeholder, PlaceholderParagraph, Heading, Icon, Butto
 import { resizeCol, getInit } from './utility';
 import { GridCell } from './GridCell';
 import { DropdownProps } from '@/components/atoms/dropdown';
-import { getCellSize } from './columnUtility';
+import { getCellSize, getWidth } from './columnUtility';
 
 interface SharedCellProps {
   _this: Grid;
@@ -312,9 +312,9 @@ export const Cell = (props: CellProps) => {
         if (from.type === to.type) _this.reorderCol(from.name, to.name);
       }}
       style={{
-        width: schema.width || width,
-        minWidth: schema.minWidth || minWidth,
-        maxWidth: schema.maxWidth || maxWidth
+        width: getWidth.call(_this, schema.width || width),
+        minWidth: getWidth.call(_this, schema.minWidth || minWidth),
+        maxWidth: getWidth.call(_this, schema.maxWidth || maxWidth)
       }}
     >
       {head ? (

diff --git a/core/components/organisms/grid/Grid.tsx b/core/components/organisms/grid/Grid.tsx
@@ -60,11 +60,11 @@ export type ColumnSchema = {
    */
   displayName: string;
   /**
-   * width of the column(px)
+   * width of the column(px/%)
    */
   width?: React.ReactText;
   /**
-   * min-width of the column(px)
+   * min-width of the column(px/%)
    * @default 100
    */
   minWidth?: React.ReactText;

diff --git a/core/components/organisms/grid/__stories__/_common_/schema.tsx b/core/components/organisms/grid/__stories__/_common_/schema.tsx
@@ -9,8 +9,7 @@ const schema: Schema = [
   {
     name: 'name',
     displayName: 'Name',
-    // width: '40%',
-    // width: 300,
+    width: '40%',
     resizable: true,
     tooltip: true,
     // pinned: 'left',
@@ -50,7 +49,7 @@ const schema: Schema = [
   {
     name: 'email',
     displayName: 'Email',
-    width: 350,
+    width: 250,
     resizable: true,
     sorting: false,
     // separator: true,

diff --git a/core/components/organisms/grid/columnUtility.tsx b/core/components/organisms/grid/columnUtility.tsx
@@ -53,10 +53,15 @@ export function hideColumn(this: Grid, name: ColumnSchema['name'], value: boolea
 }
 
 export function getWidth(this: Grid, width: React.ReactText) {
-  if (typeof width === 'number') return width;
-  if (width.charAt(width.length - 1) === '%') {
-    if (this.gridRef.current) {
-      const gridWidth = this.gridRef.current.clientWidth;
+  if (this.gridRef.current) {
+    if (typeof width === 'number') return width;
+    if (width.charAt(width.length - 1) === '%') {
+      const {
+        withCheckbox
+      } = this.props;
+
+      const checkboxWidth = withCheckbox ? document.querySelector('.Grid-cell--checkbox')!.clientWidth : 0;
+      const gridWidth = this.gridRef.current.clientWidth - checkboxWidth;
       return gridWidth * (+width.slice(0, -1) / 100);
     }
   }

diff --git a/core/components/organisms/table/Table.tsx b/core/components/organisms/table/Table.tsx
@@ -39,9 +39,9 @@ interface SyncProps {
    *    ColumnSchema: {
    *        name: string;
    *        displayName: string;
-   *        width?: number;
-   *        minWidth?: number;
-   *        maxWidth?: number;
+   *        width?: React.ReactText;
+   *        minWidth?: React.ReactText;
+   *        maxWidth?: React.ReactText;
    *        resizable?: boolean;
    *        sorting?: boolean;
    *        comparator?: (a: RowData, b: RowData) => -1 | 0 | 1;

diff --git a/core/components/organisms/table/__stories__/syncTable.story.tsx b/core/components/organisms/table/__stories__/syncTable.story.tsx
@@ -47,7 +47,7 @@ const customCode = `
     {
       name: 'name',
       displayName: 'Name',
-      width: 300,
+      width: '40%',
       resizable: true,
       separator: true,
       tooltip: true,

diff --git a/css/src/components/grid.css b/css/src/components/grid.css
@@ -182,7 +182,7 @@
     padding-left: var(--spacing);
 }
 
-.Grid-cell--head.Grid-cell:first-child {
+.Grid-cell--head.Grid-cell:first-of-type {
     border-left: none;
 }