feat: add custom headers for table v2 component (#498)

src/components/v2/Table/Table.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon'
+import Popup from 'semantic-ui-react/dist/commonjs/modules/Popup'
 import TableContainer from './TableContainer'
 import { TableContent } from './TableContent'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 export default {
   title: 'V2/Table',
@@ -44,3 +46,50 @@ Basic.args = {
   handleSortByChange: (value: string) => console.log('sortBy', value),
   sortBy: ''
 }
+
+export const CustomHeaders = Template.bind({})
+
+CustomHeaders.args = {
+  children: (
+    <TableContent
+      data={[
+        { column1: 'test1', column2: <span>TEST 1</span> },
+        {
+          column1: 'test2',
+          column2: (
+            <div>
+              TEST<strong>2</strong>
+            </div>
+          )
+        }
+      ]}
+      customHeaders={{
+        column1: 'My Column 1',
+        column2: (
+          <span>
+            Col 2
+            <Popup
+              content="this is column 2 tooltip"
+              trigger={<Icon name="info circle" />}
+              on="hover"
+            />
+          </span>
+        )
+      }}
+      activePage={1}
+      isLoading={false}
+      setPage={() => console.log('setPage')}
+      totalPages={2}
+      empty={() => null}
+      total={10}
+      hasHeaders
+    />
+  ),
+  tabsList: [
+    { displayValue: 'Tab1', value: 'tab1' },
+    { displayValue: 'Tab2', value: 'tab2' }
+  ],
+  sortbyList: [],
+  handleSortByChange: (value: string) => console.log('sortBy', value),
+  sortBy: ''
+}

src/components/v2/Table/TableContent/TableContent.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, within } from '@testing-library/react'
+import { RenderResult, render, within } from '@testing-library/react'
 import { DataTableType } from './TableContent.types'
 import TableContent, { ROWS_PER_PAGE } from './TableContent'
 
@@ -81,6 +81,29 @@ describe('Table content', () => {
     })
   })
 
+  describe('when custom headers are defined', () => {
+    const customHeaderText = 'My super custom header'
+    let screen: RenderResult
+    beforeEach(() => {
+      screen = render(
+        <TableContent
+          data={data}
+          customHeaders={{ first_header: customHeaderText }}
+          isLoading={false}
+          empty={() => <div>empty table</div>}
+          total={0}
+        />
+      )
+    })
+    it('should render custom headers correctly', () => {
+      expect(screen.getByText(customHeaderText)).toBeInTheDocument()
+    })
+
+    it('should render attribute key as header for non defined custom headers', () => {
+      expect(screen.getByText('second_header')).toBeInTheDocument()
+    })
+  })
+
   describe('Should render the loader if its loading', () => {
     it('should render the loader', async () => {
       const screen = render(

src/components/v2/Table/TableContent/TableContent.tsx

@@ -21,11 +21,12 @@ const TableContent = (props: Props) => {
     total,
     rowsPerPage = ROWS_PER_PAGE,
     hasHeaders = false,
+    customHeaders = {},
     i18n
   } = props
 
   const isMobile = useMobileMediaQuery()
-  const headers = data.length > 0 ? Object.keys(data[0]) : null
+  const attributes = data.length > 0 ? Object.keys(data[0]) : null
   const hasPagination = totalPages && totalPages > 1
 
   return (
@@ -38,28 +39,30 @@ const TableContent = (props: Props) => {
         <div className="dui-table-content__table--empty">
           <Loader active data-testid="loader" />
         </div>
-      ) : headers ? (
+      ) : attributes ? (
         <Table basic="very" data-testid="table-content">
           <Table.Body
             className={isLoading ? 'dui-table-content__table--loading' : ''}
           >
             <Table.Row>
-              {headers.map((header) => (
-                <Table.HeaderCell key={header}>
-                  <span>{header}</span>
+              {attributes.map((attr) => (
+                <Table.HeaderCell key={attr}>
+                  <span>
+                    {customHeaders[attr] ? customHeaders[attr] : attr}
+                  </span>
                 </Table.HeaderCell>
               ))}
             </Table.Row>
             {data?.map((data: unknown, index) => (
               <Table.Row key={index}>
-                {headers.map((header: string) => (
+                {attributes.map((attr: string) => (
                   <Table.Cell
                     style={{
-                      width: `${100 / headers.length}%`
+                      width: `${100 / attributes.length}%`
                     }}
-                    key={header}
+                    key={attr}
                   >
-                    {data[header]}
+                    {data[attr]}
                   </Table.Cell>
                 ))}
               </Table.Row>

src/components/v2/Table/TableContent/TableContent.types.tsx

@@ -11,6 +11,7 @@ export type Props = {
   rowsPerPage?: number
   mobileTableBody?: React.ReactNode
   hasHeaders?: boolean
+  customHeaders?: Record<string, string | React.ReactNode>
   i18n?: {
     sortBy: {
       showing: string