Table

Styled table component

Installation

npm install --save @gladio/table

Usage

import Table from "@gladio/table"
function App () {
  return <Table>
    <thead><tr><th>Title 1</th></tr></thead>
    <tbody><tr><td>Row 1</td></tr></tbody>
  </Table>
}

Playground

Code Editor

function () {
  const headers = ["#", "Transaction ID", "Amount"]
  const rows = [
    [1, "Ref-123123", "12,000"],
    [2, "AIU123123", "1,12,000"]
  ]
  return <Table
    bordered
    striped
    headers={headers}
    rows={rows}
    autoWidth
    alignCols={{0: "right", 2: "right"}} />
}

function () {
  const headers = ["#", "Transaction ID", "Amount"]
  const rows = [
    [1, "Ref-123123", "12,000"],
    [2, "AIU123123", "1,12,000"]
  ]
  return <Table
    bordered
    striped
    headers={headers}
    rows={rows}
    autoWidth
    alignCols={{0: "right", 2: "right"}} />
}

#	Transaction ID	Amount
1	Ref-123123	12,000
2	AIU123123	1,12,000

Components

Icons

Table

Installation

Usage

Playground