fix(table): dataLabel prop allows for customized data-label on header

fixes #2941
patternfly · Sep 30, 2019 · 119d1ff · 119d1ff
1 parent 6d10b75
commit 119d1ff
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/packages/patternfly-4/react-table/src/components/Table/HeaderCell.tsx b/packages/patternfly-4/react-table/src/components/Table/HeaderCell.tsx
@@ -9,6 +9,7 @@ export interface HeaderCellProps {
   isVisible?: boolean;
   scope?: string;
   textCenter?: boolean;
+  dataLabel?: string;
 }
 
 export const HeaderCell: React.FunctionComponent<HeaderCellProps> = ({
@@ -17,6 +18,7 @@ export const HeaderCell: React.FunctionComponent<HeaderCellProps> = ({
   isVisible,
   scope = '',
   textCenter = false,
+  dataLabel = '',
   ...props
 }: HeaderCellProps ) => {
   const Component = component as any;

diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.tsx b/packages/patternfly-4/react-table/src/components/Table/Table.tsx
@@ -135,6 +135,7 @@ export interface ICell {
   data?: any;
   header?: any;
   cell?: any;
+  dataLabel?: string;
 }
 
 export interface IRowCell {

diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.test.tsx b/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.test.tsx
@@ -171,6 +171,16 @@ describe('headerUtils', () => {
         expect(result[0].cell.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined();
         expect(result[0].cell.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined();
       });
+
+      describe('custom dataLabel', () => {
+        const cells = [{ title: 'expanded first', dataLabel: 'compact first' }, { title: 'expanded second'}] as ICell[];
+        const mixed = calculateColumns(cells, {});
+        cells.forEach((oneCell: ICell, key) => {
+          test(`${oneCell}`, () => {
+            expect(mixed[key].props['data-label']).toBe(oneCell.dataLabel ||oneCell.title);
+          });
+        });
+      });
     });
   });
 

diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.tsx b/packages/patternfly-4/react-table/src/components/Table/utils/headerUtils.tsx
@@ -59,14 +59,16 @@ const generateCell = ({ cellFormatters, cellTransforms, columnTransforms, cell }
 /**
  * Function to map custom simple object properties to expected format with property, header, cell, extra params
  * and props.
- * @param {*} column to be shown in header - either string or object with title, transformers and formatters (for cels as well).
+ * @param {*} column to be shown in header - either string or object with title, transformers and formatters (for cells as well).
  * @param {*} extra additional object with callbacks for specific formatters.
  * @param {*} key cell key to be shown in data-key.
  * @param {*} props additional props for each cell.
  * @returns {*} object with property, extraParams, header, cell and props.
  */
 const mapHeader = (column: ICell, extra: any, key: number, ...props: any) => {
   const title = (column.hasOwnProperty('title') ? column.title : column) as string | ICell;
+  const dataLabel = (column.hasOwnProperty('dataLabel') ? column.dataLabel : typeof title === 'string' ? title : `column-${key}`) as string | ICell;
+  console.error(dataLabel);
   return {
     property:
       (typeof title === 'string' &&
@@ -80,7 +82,7 @@ const mapHeader = (column: ICell, extra: any, key: number, ...props: any) => {
     header: generateHeader(column, title),
     cell: generateCell(column, extra),
     props: {
-      'data-label': typeof title === 'string' ? title : `column-${key}`,
+      'data-label': dataLabel,
       'data-key': key,
       ...(column.hasOwnProperty('props') ? column.props : {}),
       ...props