Ecme - The Ultimate Next & TypeScript Web Template

Table

Tables display data in rows and columns which make users compare and analyze information easier.

Simple

Simple Table example.

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria

Compact

Table come with compact view which let us display more data.

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria

Sorting

Columns can be sorted by selecting table headers

First Name	Last Name	Age	Visits	Status	Profile Progress
Maria	Anders	24	28	complicated	56
Francisco	Chang	9	90	single	77
Roland	Mendel	1	16	single	56
Helen	Bennett	43	94	single	53
Yoshi	Tannamuri	37	85	single	28

Filtering

Filtering example.

Search:

First Name	Last Name	Email
Alastair	Dilkes	adilkes0@jigsy.com
Matthaeus	Graber	mgraber1@adobe.com
Gayel	Croxley	gcroxley2@businessinsider.com
Gracia	Domegan	gdomegan3@reference.com
Galvan	Beringer	gberinger4@yellowpages.com
Maud	Aicheson	maicheson5@ycombinator.com
Gwenette	Dailey	gdailey6@state.tx.us
Marius	Leman	mleman7@cnn.com
Natka	Varcoe	nvarcoe8@hhs.gov
Kellie	Ackerley	kackerley9@posterous.com

Pagination

Table can works with Pagination component.

First Name	Last Name	Age
Maria 0	Anders 0	0
Maria 1	Anders 1	1
Maria 2	Anders 2	2
Maria 3	Anders 3	3
Maria 4	Anders 4	4
Maria 5	Anders 5	5
Maria 6	Anders 6	6
Maria 7	Anders 7	7
Maria 8	Anders 8	8
Maria 9	Anders 9	9

10 / page

Group

Grouping example.

Name		Info
First Name	Last Name	Email	Visits
Alastair	Dilkes	adilkes0@jigsy.com	Female
Matthaeus	Graber	mgraber1@adobe.com	Genderqueer
Gayel	Croxley	gcroxley2@businessinsider.com	Male
Gracia	Domegan	gdomegan3@reference.com	Genderfluid
Galvan	Beringer	gberinger4@yellowpages.com	Agender
Maud	Aicheson	maicheson5@ycombinator.com	Male
Gwenette	Dailey	gdailey6@state.tx.us	Genderfluid
Marius	Leman	mleman7@cnn.com	Genderfluid
Natka	Varcoe	nvarcoe8@hhs.gov	Male
Kellie	Ackerley	kackerley9@posterous.com	Genderfluid

Row Selection

Row selection example.

First Name	Last Name	Email
Alastair	Dilkes	adilkes0@jigsy.com
Matthaeus	Graber	mgraber1@adobe.com
Gayel	Croxley	gcroxley2@businessinsider.com
Gracia	Domegan	gdomegan3@reference.com
Galvan	Beringer	gberinger4@yellowpages.com
Maud	Aicheson	maicheson5@ycombinator.com
Gwenette	Dailey	gdailey6@state.tx.us
Marius	Leman	mleman7@cnn.com
Natka	Varcoe	nvarcoe8@hhs.gov
Kellie	Ackerley	kackerley9@posterous.com

Expanding

Row expand example.

First Name	Last Name	Age	Visits	Status	Profile Progress
Maria	Anders	24	28	complicated	56
Francisco	Chang	9	90	single	77
Roland	Mendel	1	16	single	56
Helen	Bennett	43	94	single	53
Yoshi	Tannamuri	37	85	single	28

SubComponent

Row expand with sub component

First Name	Last Name	Age	Visits	Status	Profile Progress
Maria	Anders	24	28	complicated	56
Francisco	Chang	9	90	single	77
Roland	Mendel	1	16	single	56
Helen	Bennett	43	94	single	53
Yoshi	Tannamuri	37	85	single	28

Editable

Cell editable example

First Name	Last Name	Email

Drag & Drop

Example of implementing react-dnd to the table.

First Name	Last Name	Email
Alastair	Dilkes	adilkes0@jigsy.com
Matthaeus	Graber	mgraber1@adobe.com
Gayel	Croxley	gcroxley2@businessinsider.com
Gracia	Domegan	gdomegan3@reference.com
Galvan	Beringer	gberinger4@yellowpages.com
Maud	Aicheson	maicheson5@ycombinator.com
Gwenette	Dailey	gdailey6@state.tx.us
Marius	Leman	mleman7@cnn.com
Natka	Varcoe	nvarcoe8@hhs.gov
Kellie	Ackerley	kackerley9@posterous.com

Resizable

Column resize example.

First Name	Last Name	Email	Gender
Alastair	Dilkes	adilkes0@jigsy.com	Female
Matthaeus	Graber	mgraber1@adobe.com	Genderqueer
Gayel	Croxley	gcroxley2@businessinsider.com	Male
Gracia	Domegan	gdomegan3@reference.com	Genderfluid
Galvan	Beringer	gberinger4@yellowpages.com	Agender
Maud	Aicheson	maicheson5@ycombinator.com	Male
Gwenette	Dailey	gdailey6@state.tx.us	Genderfluid
Marius	Leman	mleman7@cnn.com	Genderfluid
Natka	Varcoe	nvarcoe8@hhs.gov	Male
Kellie	Ackerley	kackerley9@posterous.com	Genderfluid

API

Table

Prop	Description	Type	Default
asElement	Render element	`string`	`'table'`
cellBorder	Whether display cell border	`boolean`	`false`
compact	Whether display table on compact view	`boolean`	`false`
hoverable	Whether table row able to hover	`boolean`	`true`
overflow	Whether allow table content overflow	`boolean`	`true`

Table.THead

Prop	Description	Type	Default
asElement	Render element	`string`	`'thead'`

Table.TBody

Prop	Description	Type	Default
asElement	Render element	`string`	`'tbody'`

Table.TFoot

Prop	Description	Type	Default
asElement	Render element	`string`	`'tfoot'`

Table.Tr

Prop	Description	Type	Default
asElement	Render element	`string`	`'tr'`

Table.Th

Prop	Description	Type	Default
asElement	Render element	`string`	`'th'`

Table.Td

Prop	Description	Type	Default
asElement	Render element	`string`	`'td'`

Table.Sorter

Prop	Description	Type	Default
sort	Sort status	`false \| 'asc' \| 'desc'`	`-`

Dependencies

React Table

Most of the examples above were integrated with react-table, its is lightweight and extensible data table component for materialize, filter, sort, group, aggregate, paginate and display massive data. Vist the official docs for futher examples & hooks usage.