Components

Table

Data tables display sets of data across rows and columns.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Tables are used to display tabular data using rows and columns

import { Table, TableRow, TableHead, TableCell, TableBody, HeadCell, Button, DynamicIcon } from 'legion-ui';

Variant

Legion have two variant of table

Basic Table

No.	Full Name	Born	Age
1	Eric Clapton	Ripley, United Kingdom	77
2	Adam Sandler	Brooklyn, New York, United States	56
3	Jennifer Aniston	Sherman Oaks, Los Angeles, California, United States	53
4	Ben Stiller	New York, New York, United States	56
5	Brooklyn Decker	Dayton, Ohio, United States	35

<Table>
  <TableHead>
    <TableRow>
      <HeadCell>No.</HeadCell>
      <HeadCell align="left">Full Name</HeadCell>
      <HeadCell align="left">Born</HeadCell>
      <HeadCell align="left">Age</HeadCell>
      <HeadCell>Actions</HeadCell>
    </TableRow>

Data Table

The Table component has a close mapping to the native <table> elements. This constraint makes building rich data tables challenging.

Fullname	Born	Age
Eric Clapton	Ripley, United Kingdom	77
Adam Sandler	Brooklyn, New York, United States	56
Jennifer Aniston	Sherman Oaks, Los Angeles, California, United States	53
Ben Stiller	New York, New York, United States	56
Brooklyn Decker	Dayton, Ohio, United States	35

import React, { Component } from 'react';
import { DataTable as DataTableComponent } from 'legion-ui';

const dataTable = [
  {
    fullName: 'Eric Clapton',
    born: 'Ripley, United Kingdom',
    age: 77,
  },

Props

Table

property	propType	required	default	description
align	text	-	-	Sets or returns the alignment of a table according to surrounding text
background	text	-	-	Sets or returns the background image of a table
bgColor	text	-	-	Sets or returns the background color of a table
border	text	-	-	Sets or returns the width of the table border.
caption	text	-	-	Returns the `<caption>` element of a table
cellPadding	text	-	-	Sets or returns the amount of space between the cell border and cell content
cellSpacing	text	-	-	Sets or returns the amount of space between the cells in a table
height	text	-	-	Sets or returns the height of a table
width	text	-	-	Sets or returns the width of the table

TableRow

property	propType	required	default	description
align	text	-	-	Sets or returns the horizontal alignment of the content within a table row
bgColor	text	-	-	Sets or returns the background color of a table row
ch	text	-	-	Sets or returns an alignment character for cells in a table row
chOff	text	-	-	Sets or returns the horizontal offset of the ch property
height	text	-	-	Sets or returns the height of a table row.
rowIndex	text	-	-	Returns the position of a row in the rows collection of a table
sectionRowIndex	text	-	-	Returns the position of a row in the rows collection of a tbody, thead, or tfoot
vAlign	text	-	-	Sets or returns the vertical alignment of the content within a table row

HeadCell

property	propType	required	default	description
abbr	text	-	-	Sets or returns the value of the abbr attribute
align	text	-	-	Sets or returns the horizontal alignment of the content in a data cell
axis	text	-	-	Sets or returns a comma-separated list of related data cells
background	text	-	-	Sets or returns the background image of a data cell
bgColor	text	-	-	Sets or returns the background color of a table
cellIndex	text	-	-	Returns the position of a cell in the cells collection of a table row
ch	text	-	-	Sets or returns an alignment character for a data cell
chOff	text	-	-	Sets or returns the horizontal offset of the ch property
colSpan	text	-	-	Sets or returns the value of the colspan attribute
headers	text	-	-	Sets or returns the value of the headers attribute
height	text	-	-	Sets or returns the height of a data cell
noWrap	text	-	-	Sets or returns whether the content in a cell can be wrapped
rowSpan	text	-	-	Sets or returns the value of the rowspan attribute
vAlign	text	-	-	Sets or returns the vertical alignment of the content within a cell
width	text	-	-	Sets or returns the width of a data cell

HeadCell/TableCell

property	propType	required	default	description
abbr	text	-	-	Sets or returns the value of the abbr attribute
align	text	-	-	Sets or returns the horizontal alignment of the content in a data cell
axis	text	-	-	Sets or returns a comma-separated list of related data cells
background	text	-	-	Sets or returns the background image of a data cell
bgColor	text	-	-	Sets or returns the background color of a table
cellIndex	text	-	-	Returns the position of a cell in the cells collection of a table row
ch	text	-	-	Sets or returns an alignment character for a data cell
chOff	text	-	-	Sets or returns the horizontal offset of the ch property
colSpan	text	-	-	Sets or returns the value of the colspan attribute
headers	text	-	-	Sets or returns the value of the headers attribute
height	text	-	-	Sets or returns the height of a data cell
noWrap	text	-	-	Sets or returns whether the content in a cell can be wrapped
rowSpan	text	-	-	Sets or returns the value of the rowspan attribute
vAlign	text	-	-	Sets or returns the vertical alignment of the content within a cell
width	text	-	-	Sets or returns the width of a data cell

Data Table

property	propType	description
header	`object`	Set the title of the expand column
items	`Array of Object`	Data record array to be displayed
onFilterCategory	`React.ReactNode`	Filter menu config
onSortUp	`React.ReactNode`	sorting column
onSearch	`React.ReactNode`	searching list
onNestedTable	`React.ReactNode`	nested table
search	`React.ReactNode`	value search

Do you have feedback?

Please let us know to make it better

Send Feedback