import { Table } from 'reactstrap'

const TableResponsive = () => {
  return (
    <Table responsive>
      <thead>
        <tr>
          <th scope='col' className='text-nowrap'>
            #
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 1
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 2
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 3
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 4
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 5
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 6
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 7
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 8
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 9
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 10
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 11
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 12
          </th>
          <th scope='col' className='text-nowrap'>
            Heading 13
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td className='text-nowrap'>1</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
          <td className='text-nowrap'>Table cell</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableResponsive
