---
name: Table
menu: Components
route: /components/Table
---

import Table from '../Table';
import { Playground, Props } from 'docz';
import Avatar from './../../atoms/ProfileImage';
import ProgressBar from './../../atoms/ProgressBar';
import Label from './../../atoms/Label'

# Table

This component renders an HTML `<table>` and passes along all props.

## API
<Props of={Table} />

## Example Usage
<Playground>
	<Table
		columns={[
			{
				key: 'avatar',
				label: '',
				align: 'center',
			},
			{
				key: 'colaborador',
				label: 'Colaborador',
			},
			{
				key: 'estatusInvitacion',
				label: 'Estatus de invitación',
			},
			{
				key: 'empresa',
				label: 'Empresa',
			},
			{
				key: 'correo',
				label: 'Correo',
			},
			{
				key: 'permisos',
				label: 'Permisos',
				align: 'right',
			},
		]}
		items={[
			{
				id: 1,
				avatar: (
					<Avatar
						small={false}
						src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/54/549723448131c6597ed5ff00d996c7cde7bc8d9c.jpg"
						card={false}
					/>
				),
				colaborador: 'Mauricio Parra',
				estatusInvitacion: (
					<ProgressBar />
				),
				empresa: 'Company',
				correo: 'mauricio@gmail.com',
				permisos: 'permisos',
			},
			{
				id: 2,
				avatar: (
					<Avatar
						name="Datank"
						card={false}
					/>
				),
				colaborador: 'colaborador',
				estatusInvitacion: (
					<ProgressBar value={100} />
				),
				empresa: 'empresa',
				correo: 'correo',
				permisos: 'permisos',
			},
		]}
		withMenu
		optionsMenu={[
			{
				option: 'Editar',
				action: (item) => console.log('EDITAR', item),
			},
			{
				option: 'Eliminar',
				action: (item) => console.log('Eliminar', item),
			},
		]}
		count={2}
		page={0}
		onPageChanged={newPage => console.log('NEW PAGE', newPage)}
	/>
</Playground>

## Meeting
<Playground>
	<Table
				meeting={{onclick: ()=> console.log('click')}}
        columns={[
          {
            key: 'avatar',
            label: '',
            align: 'center',
          },
          {
            key: 'compromisos',
            label: 'Compromisos',
          },
          {
            key: 'estatusInvitacion',
            label: 'Fecha compromiso',
          },
          {
            key: 'evidencia',
            label: 'Estatus evidencia',
          },
        ]}
        items={[
          {
            id: 1,
            avatar: (
              <Avatar
                small={false}
                src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/54/549723448131c6597ed5ff00d996c7cde7bc8d9c.jpg"
                card={false}
              />
            ),
            compromisos: 'Este es un texto de compromiso  csdfklerr jndfior',
            estatusInvitacion: '12/8/2019',
            evidencia: (
              <Label text="Pendiente" color="#E65100" background="#FFF3E0" />
            ),
            correo: 'mauricio@gmail.com',
            permisos: 'permisos',
          },
          {
            id: 2,
            avatar: <Avatar name="Datank" card={false} />,
            compromisos: 'asdsadsadsadasdasd',
            estatusInvitacion: '9/5/2019',
            evidencia: (
              <Label text="Pendiente" color="#E65100" background="#FFF3E0" />
            ),
            correo: 'correo',
            permisos: 'permisos',
          },
        ]}
        withMenu
        optionsMenu={[
          {
            option: 'Editar',
            action: item => console.log('EDITAR', item),
          },
          {
            option: 'Eliminar',
            action: item => console.log('Eliminar', item),
          },
        ]}
        count={2}
        page={0}
        onPageChanged={newPage => console.log('NEW PAGE', newPage)}
      />
</Playground>