0.1.0 • Published 3 years ago

@talixo/table v0.1.0

Weekly downloads
9
License
MIT
Repository
github
Last release
3 years ago

Talixo Table

UI components which are used to create tables in simple and good way.

How to install

Package is available as @talixo/table in NPM registry, so you can use it in your project using npm install @talixo/table --save or yarn add @talixo/table.

Requirements

Your package should additionally have some extra dependencies:

  • @talixo/icon: ^0.1.1
  • @talixo/shared: ^0.1.0
  • prop-types: ^15.6.1
  • react: ^16.2.0
  • react-dom: ^16.2.0

These packages are required by @talixo/table, but you have to install them manually, to avoid having different versions of these in your application.

Supported props

Table

Represents table itself.

It handles all table properties, and additionally:

Property nameTypeDefaultDescription
classNamestringn/aadditional class name passed to table
childrennodesn/aHead, Body and Footer elements to put inside
condensedbooleanfalseShould table be condensed (more content, less spacing)?
fixedbooleanfalseShould table have fixed layout?

Head

Represents table header (<thead> with single row).

It handles all thead properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/aHeadCells to put inside

HeadCell

Represents single cell inside table Head.

It handles all th properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/aContent to put inside

Body

Represents single row inside table Body.

It handles all tbody properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/aRowss to include inside table content

Row

Represents single row inside table Body.

It handles all tr properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/aCells to include inside table row

Cell

Represents single cell inside table Row or Footer.

It handles all td properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/aElements to include inside cell

ActionsCell

Represents cell which can contain Actions inside.

It handles all td properties, and additionally:

Property nameTypeDefaultDescription
classNamestringn/aadditional class name passed to cell
childrennodesn/aActions which should be included in table
verticalbooleanfalseShould Actions inside be shown vertically?

Action

Represents Action button in ActionsCell.

It handles all button properties, and additionally:

Property nameTypeDefaultDescription
classNamestringn/aadditional class name passed to button
iconstringn/aicon name to represent action
labelstring or noden/alabel to represent action
warnbooleanfalseshould be handled carefully? - changed color and maybe confirmation before.

Footer

Represents table footer (<tfoot> with single row).

It handles all tfoot properties, and additionally:

Property nameTypeDefaultDescription
childrennodesn/acells which should be included in table footer row

Simple example

Changelog

  • 0.1.0 - initial version
1.0.0-alpha.35

3 years ago

1.0.0-alpha.31

3 years ago

1.0.0-alpha.30

3 years ago

1.0.0-alpha.27

3 years ago

1.0.0-alpha.24

3 years ago

1.0.0-alpha.20

4 years ago

1.0.0-alpha.19

4 years ago

1.0.0-alpha.16

4 years ago

1.0.0-alpha.12

4 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.2

4 years ago

0.1.0

4 years ago