Table

Beta

The Table component has a set of Table properties which can be used to build a table and render it in the user interface

Usage#

User

Name

Email

Phone

Main

AK

Akshay Kannan

akshayk@gmail.com

+91 8878978132

New

AK

Akash Kannan

akashk@gmail.com

+91 9178978110

Old

AG

Aravind G

aravindg@gmail.com

+91 3613671231

Old

AK

Akshay Kannan

akshayk@gmail.com

+91 8878978132

New

AK

Akash Kannan

akashk@gmail.com

+91 9178978110

Old

AG

Aravind G

aravindg@gmail.com

+91 3613671231

Old

Code#

<Table>
  <Table.Head>
    <Table.Cell>
      <Text>User</Text>
    </Table.Cell>
    <Table.Cell>
      <Text>Name</Text>
    </Table.Cell>
    <Table.Cell>
      <Text>Email</Text>
    </Table.Cell>
    <Table.Cell>
      <Text>Phone</Text>
    </Table.Cell>
  </Table.Head>
  <Table.Body height={200}>
    {data.map((value, index) => {
      return (
        <Table.Row key={index}>
          <Table.Cell>
            <Avatar label={value.name} size={30} />
          </Table.Cell>
          <Table.Cell>
            <Text>{value.name}</Text>
          </Table.Cell>
          <Table.Cell>
            <Text>{value.email}</Text>
          </Table.Cell>
          <Table.Cell>
            <Text>+91 {value.phone}</Text>
          </Table.Cell>
        </Table.Row>
      );
    })}
  </Table.Body>
</Table>

API#

Component	Prop	Type	Possible values	Default Value
Table	width	`number`	Any number accepted values	`100%`
Table.Body	height	`number`	Any number accepted values	`100%`
Table.Cell	width	`number`	Any number accepted values	`200px`
Table.Cell	align	`string`	`"center"`,`"left"` and `"right"`	`left`

Built by Akshay 🤙

Usage
API