Feature - Table Component [Dev]

[omarefg]

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Table component lets the user to visualize data in an easy way.

In a responsive way

And support actions and pagination.

The table will be used like this:

import { Table } from '@platzily-ui/components'

const rows = [
  { name: 'Bruce', job: 'Batman' },
  { name: 'Clark', job: 'Superman' },
  { name: 'Alonso', job: 'Firefighter' }
]

const columns = [
  {
    title: 'Name' // The title shown in the head of the column,
    accessor: 'name' // the key to access the object in the data
  },
  {
    title: 'Job' // The title shown in the head of the column,
    accessor: 'job' // the key to access the object in the data
  },
  {
    title: 'Actions',
    Cell: ({ row, column }) => ( // You could pass a key called `Cell` to, it needs to be a function returning a component, and receive as prop, row and column
      <div>
        <button>Action 1</button>
        <button>Action 2</button>
      </div>
    )
  }
]

const MyComponent = () => {
  return (
    <Table
      rows={rows}
      columns={columns}
      page={0} // actual page
      onPageChange={() => {}} // function to be called when page change
    />
  )
}

The component receive as props

• rows (array of any schema) - required
• columns (array of the following schema) - required
  • title: title of the column - required
  • accessor: key of the row object to be accessed - required if Cell is not presented
  • Cell: function that receives row and column as prop and returns a component - requried if accessor is not presented
• size (qty of rows per page) - required
• page (actual page) - required
• onPageChange (function to be called when page change) - required

Requirements 🌈

The component mus be tested using unit testing

Motivation 🔦

A way to present data to the user.