fix(table): fix table types

Author: jackcmeyer

src/components/Table/Table.tsx

@@ -1,13 +1,9 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { ButtonVariant } from 'src/interfaces'
 
 import { Button } from '../Button'
 
-interface Row {
-  [key: string]: ReactNode
-}
-
-interface Props<T extends Row> {
+interface Props<T> {
   tableClassName: string
   headerClassName: string
   columns: { key: string; label: string; formatter?: (row: T) => React.ReactNode }[]
@@ -18,7 +14,7 @@ interface Props<T extends Row> {
   onRowClick?: (row: T) => void
 }
 
-function Table<T extends Row>(props: Props<T>) {
+function Table<T>(props: Props<T>) {
   const {
     tableClassName,
     headerClassName,
@@ -35,7 +31,7 @@ function Table<T extends Row>(props: Props<T>) {
       <thead className={headerClassName}>
         <tr>
           {columns.map((column) => (
-            <th key={column.key}>{column.label}</th>
+            <th key={column.key as string}>{column.label}</th>
           ))}
           {actions ? <th>{actionsHeaderText}</th> : null}
         </tr>
@@ -52,7 +48,7 @@ function Table<T extends Row>(props: Props<T>) {
             }}
           >
             {columns.map((column) => {
-              const content = !column.formatter ? row[column.key] : column.formatter(row)
+              const content = !column.formatter ? row[column.key as keyof T] : column.formatter(row)
               return <td key={`${column.key}-${getID(row)}`}>{content}</td>
             })}
 

stories/table.stories.tsx

@@ -4,6 +4,13 @@ import React from 'react'
 import { Table, Toast, Toaster } from '../src'
 import { ButtonVariant } from '../src/interfaces'
 
+interface Data {
+  id: number
+  name: string
+  phone: string
+  drinks: string[]
+}
+
 storiesOf('Table', module)
   .addParameters({
     info: {
@@ -14,62 +21,57 @@ storiesOf('Table', module)
     <div style={{ marginLeft: '2em', marginRight: '2em' }}>{storyFn()}</div>
   ))
   .add('Demo Table', () => {
-    const ID = 'id'
-    const NAME = 'name'
-    const PHONE = 'phone'
-    const DRINKS = 'drinks'
-
     const getDrinksList = (row: any) => (
       <ul>
-        {row[DRINKS].map((d: string) => (
+        {row.drinks.map((d: string) => (
           <li>{d}</li>
         ))}
       </ul>
     )
 
     const columns = [
-      { key: ID, label: 'ID' },
-      { key: NAME, label: 'Name' },
-      { key: PHONE, label: 'Phone #' },
-      { key: DRINKS, label: 'Drinks?', formatter: getDrinksList },
+      { key: 'id', label: 'ID' },
+      { key: 'name', label: 'Name' },
+      { key: 'phone', label: 'Phone #' },
+      { key: 'drinks', label: 'Drinks?', formatter: getDrinksList },
     ]
 
-    const data = [
+    const data: Data[] = [
       {
-        [ID]: 333,
-        [NAME]: 'Mickey',
-        [PHONE]: '789-777',
-        [DRINKS]: ['milk', 'tea'],
+        id: 333,
+        name: 'Mickey',
+        phone: '789-777',
+        drinks: ['milk', 'tea'],
       },
       {
-        [ID]: 777,
-        [NAME]: 'Minnie',
-        [PHONE]: '333-123',
-        [DRINKS]: ['water', 'coffee'],
+        id: 777,
+        name: 'Minnie',
+        phone: '333-123',
+        drinks: ['water', 'coffee'],
       },
     ]
 
     const actions = [
       {
         label: 'Edit',
         action: (row: any) => {
-          Toast('info', 'an edit clicked', `will edit ID=${row[ID]}`)
+          Toast('info', 'an edit clicked', `will edit ID=${row.id}`)
         },
         buttonColor: 'info' as ButtonVariant,
       },
       {
         label: 'Delete',
         action: (row: any) => {
-          Toast('error', 'a delete clicked', `will delete ID=${row[ID]}`)
+          Toast('error', 'a delete clicked', `will delete ID=${row.id}`)
         },
         buttonColor: 'danger' as ButtonVariant,
       },
     ]
 
-    const getID = (row: any) => row[ID]
+    const getID = (row: any): string => row.id
 
     const onRowClick = (row: any) => {
-      Toast('success', 'a row clicked', `${row[NAME]} @ ${row[PHONE]}`)
+      Toast('success', 'a row clicked', `${row.name} @ ${row.phone}`)
     }
 
     return (