fix!: update headers props

BREAKING CHANGE: headers props is updated

Author: lyjeileen

src/components/table/table.cy.tsx

@@ -33,7 +33,7 @@ describe('Table', () => {
       )
     })
 
-    it(`renders headers based on data keys even though headers are not provided on ${viewport} screen`, () => {
+    it(`renders headers based on data keys if headers props are not provided on ${viewport} screen`, () => {
       cy.viewport(viewport)
       cy.mount(<Table data={testData} />)
       Object.keys(testData[firstRowIndex]).forEach((item) => {
@@ -43,10 +43,25 @@ describe('Table', () => {
 
     it(`renders headers if provided on ${viewport} screen`, () => {
       cy.viewport(viewport)
-      const headers = ['column 1', 'column 2']
+      const headers = [
+        { dataKey: 'col2', label: 'column 2' },
+        { dataKey: 'col1', label: 'column 1' },
+      ]
       cy.mount(<Table headers={headers} data={testData} />)
       headers.forEach((header) => {
-        cy.get('th').contains(header, { matchCase: false })
+        cy.get('th').contains(header.label, { matchCase: false })
+      })
+
+      cy.get('.rustic-table tbody tr').each((row) => {
+        cy.wrap(row)
+          .find('td')
+          .each((cell, index) => {
+            const header = headers[index]
+            const value = (testData as Record<string, any>)[row.index()][
+              header.dataKey
+            ]
+            expect(cell.text().trim()).to.equal(value.toString())
+          })
       })
     })
 
@@ -59,26 +74,28 @@ describe('Table', () => {
 
     it(`does not show data if its header is not in the headers props on ${viewport} screen`, () => {
       cy.viewport(viewport)
-      const headers = ['col1', 'col2']
+      const headers = [{ dataKey: 'col1' }, { dataKey: 'col2' }]
       const testDataWithExtra = [...testData, { col1: 'ghl', col3: 'extra' }]
       cy.mount(<Table headers={headers} data={testDataWithExtra} />)
       cy.contains('extra').should('not.exist')
     })
 
     it(`can render rows based on headers on ${viewport} screen`, () => {
       cy.viewport(viewport)
-      const headers = ['col2', 'col1']
+      const headers = [{ dataKey: 'col2' }, { dataKey: 'col1' }]
       cy.mount(<Table headers={headers} data={testData} />)
       cy.get('th').each((th, index) => {
-        expect(th.text().trim().toLowerCase()).contains(headers[index])
+        expect(th.text().trim().toLowerCase()).contains(headers[index].dataKey)
       })
 
       cy.get('.rustic-table tbody tr').each((row) => {
         cy.wrap(row)
           .find('td')
           .each((cell, index) => {
             const header = headers[index]
-            const value = (testData as Record<string, any>)[row.index()][header]
+            const value = (testData as Record<string, any>)[row.index()][
+              header.dataKey
+            ]
             expect(cell.text().trim()).to.equal(value.toString())
           })
       })

src/components/table/table.stories.tsx

@@ -13,6 +13,13 @@ export default {
       },
     },
   },
+  argTypes: {
+    headers: {
+      control: 'array',
+      description:
+        'Use this prop to set the order of columns and assign headers. If none is provided, headers will be taken from the keys of the data objects from the `data` prop array and the first letter will be capitalized. \n<pre>```interface TableHeader:{\n  dataKey: string\n  label?: string\n}```</pre>',
+    },
+  },
 }
 
 const sampleData = [
@@ -62,7 +69,13 @@ export const Default = {
 export const ChangeOrderUsingHeader = {
   args: {
     data: sampleData,
-    headers: ['food', 'carbs', 'protein', 'fat', 'calories'],
+    headers: [
+      { dataKey: 'food' },
+      { dataKey: 'carbs' },
+      { dataKey: 'protein' },
+      { dataKey: 'fat' },
+      { dataKey: 'calories' },
+    ],
   },
 }
 
@@ -75,15 +88,15 @@ export const HasTitleAndDescription = {
   },
 }
 
-export const HasHeadersProps = {
+export const CustomizeHeaders = {
   args: {
     title: 'Nutrient Data Comparison Across Various Types of Milk',
     headers: [
-      'type (per 250ml)',
-      'calories (kCal)',
-      'carbs (g)',
-      'protein (g)',
-      'fat (g)',
+      { dataKey: 'food', label: 'type (per 250ml)' },
+      { dataKey: 'calories', label: 'calories (kCal)' },
+      { dataKey: 'carbs', label: 'carbs (g)' },
+      { dataKey: 'protein', label: 'protein (g)' },
+      { dataKey: 'fat', label: 'fat (g)' },
     ],
     description:
       'This table illustrates the variations in calories and nutrients for different types of milk, with measurements based on a serving size of 250 ml. Caloric values are expressed in kCal, and nutrient quantities are measured in grams. The data is sourced from the Canadian Nutrient File.',

src/components/table/table.tsx

@@ -12,15 +12,19 @@ import React from 'react'
 
 import { capitalizeFirstLetter } from '../helper'
 
+export interface TableHeader {
+  dataKey: string
+  label?: string
+}
+
 export type TableProps = {
   /** Data to be displayed in the table. */
   data: Array<Record<string, string | number>>
   /** Title of the table. If no title is provided, `aria-label` is defaults to "a table of data". */
   title?: string
   /** Description of the table. */
   description?: string
-  /** Use this prop to set customized headers. If none is provided, headers will be taken from the keys of the data objects from the `data` prop array. */
-  headers?: string[]
+  headers?: TableHeader[]
 }
 
 export default function Table(props: TableProps) {
@@ -31,7 +35,8 @@ export default function Table(props: TableProps) {
   const dataKeys = Array.from(
     new Set(props.data.flatMap((rowData) => Object.keys(rowData)))
   )
-  const headers = props.headers || dataKeys
+  const headers: TableHeader[] =
+    props.headers || dataKeys.map((key) => ({ dataKey: key }))
 
   return (
     <Box className="rustic-table">
@@ -54,31 +59,25 @@ export default function Table(props: TableProps) {
           {headers.length > 0 && (
             <TableHead>
               <TableRow>
-                {headers.map((header, index) => {
-                  return (
-                    <TableCell key={`header-${index}`}>
-                      {capitalizeFirstLetter(header)}
-                    </TableCell>
-                  )
-                })}
+                {headers.map((header, index) => (
+                  <TableCell key={`header-${index}`}>
+                    {header.label || capitalizeFirstLetter(header.dataKey)}
+                  </TableCell>
+                ))}
               </TableRow>
             </TableHead>
           )}
 
           <TableBody>
-            {props.data.map((rowData, index) => {
-              return (
-                <TableRow key={`row-${index}`}>
-                  {headers.map((header, dataIndex) => {
-                    return (
-                      <TableCell key={`cell-${index}x${dataIndex}`}>
-                        {rowData[header]}
-                      </TableCell>
-                    )
-                  })}
-                </TableRow>
-              )
-            })}
+            {props.data.map((rowData, rowIndex) => (
+              <TableRow key={`row-${rowIndex}`}>
+                {headers.map((header, colIndex) => (
+                  <TableCell key={`cell-${rowIndex}-${colIndex}`}>
+                    {rowData[header.dataKey]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
           </TableBody>
         </MuiTable>
       </TableContainer>