Create a generic Table Component

[irshadjsr21]

• This component should use HTML table tags to create a generic table.
• The component should be responsive so that it looks good in both desktop and mobile view.
• This component should take the following props
  • tableHeader: an array of objects with the following fields name: string, key: string. For example:

  [
      {
          "name": "Name",
          "key": "name" 
      },
      {
          "name": "Age",
          "key": "age" 
      },
      {
          "name": "Gender",
          "key": "gender" 
      }
  ]

  • The name field should be displayed as the column header and the key is the key of the object which will contain the data for that column in the tableData object.
  • tableData: an array of objects which should contain all the key as in the tableHeader array. Each entry in the tableData array should be displayed as a row in the table.

  [
      {
          "name": "John",
          "age": "35",
          "gender": "male"
      },
      {
          "name": "Jane",
          "age": "31",
          "gender": "female"
      }
  ]

  • title: string
• Create the component as shown in the design.
• The title props value should be the title of the chart.
• The tableHeader props values should be table header values.
• The tableData props values should be table record values.

For Design Reference Click Here

Location to save the component src->components->common->table.jsx