react-banquet v0.4.1

Installation

npm install react-banquet or yarn add react-banquet

Peer dependencies

Banquet depends on react ^16.8 so please verify the version you are using.

Content

• Usage
  • Basic Table
  • Borders
  • Headers
  • ClassNames
  • Row height
  • Horizontal and vertical alignment
  • Column Properties
  • Styling with stylesheets
• Typescript support
  • BanquetColumn
• API Reference
  • BanquetTable
  • BanquetRow
  • BanquetCell

Basic Table

import {BanquetTable, BanquetRow, BanquetCell} from "react-banquet"

<BanquetTable>
  <BanquetRow>
    <BanquetCell>content</BanquetCell>
    <BanquetCell>content</BanquetCell>
    <BanquetCell>content</BanquetCell>
  </BanquetRow>
</BanquetTable>

Borders

You can set which borders to show with the borders property on BanquetTable. Defaults to "all".

<BanquetTable borders="none">

• all: show all borders
• none: don't show borders
• horizontal: show only horizontal borders
• horizontal-outer: show horizontal borders and full outer frame
• horizontal-inner: show horizontal borders (frame excluded)
• vertical: show only vertical borders
• vertical-outer: show vertical borders and full outer frame
• vertical-inner: show vertical borders (frame excluded)
• outer: show only the outer frame
• inner: show all borders but the outer frame

Headers

You can set a header property on BanquetRow or BanquetCell.
This will add a "header" className to a single cell or all the cells in a row.

<BanquetTable>
  <BanquetRow header>
    <BanquetCell>my header 1</BanquetCell>
    <BanquetCell>my header 2</BanquetCell>
  </BanquetRow>
  <BanquetRow>
    <BanquetCell>content</BanquetCell>
    <BanquetCell>content</BanquetCell>
  </BanquetRow>
</BanquetTable>

ClassNames

The className property can be set on BanquetTable, BanquetRow or BanquetCell.
On BanquetTable, the className will affect the table outer div.
On BanquetRow and BanquetCell, the className will affect the cells.

Row height

The can set the row's height by setting the rowHeight property on BanquetRow. It accepts all values accepted by css property "display: grid", such as px, %, fr, minmax(), auto. For a complete reference see the official docs. It defaults to auto, which means height will be based on content.

<BanquetTable>
  <BanquetRow header rowHeight="100px">
    <BanquetCell>my header</BanquetCell>
  </BanquetRow>
  <BanquetRow rowHeight="minmax(1em, 3em)">
    <BanquetCell>content</BanquetCell>
  </BanquetRow>
</BanquetTable>

Horizontal and vertical alignment

BanquetTable, BanquetRow and BanquetCell all accept a hAlign (horizontal alignment) and vAlign (vertical alignment) property. Defaults to center. You can also set hAlign and vAlign for a whole column (see Column Properties below).

When you set hAlign and vAlign on different components, values are evaluated following the rule below (">" is used with the meaning of "takes precedence over"): cell alignment > column alignment > row alignment > table alignment.

Column Properties

BanquetTable accepts a columnProps property, which is an array of the same length as the number of columns. Every element in the array contains the properties for said column.
The properties you can set are:

• width: accepts all values accepted by css property "display: grid", such as px, %, fr, minmax(), auto. For a complete reference see the official docs. Defaults to "auto"
• className: a className to apply to the elements of a single column.
• hAlign: the column's cells' horizontal alignment. Can be set to right, left or center.
• vAlign: the column's cells' vertical alignment. Can be set to top, bottom or center.
• formatting: a formatting function that will be applied to all the cells in the column.

const columns = [
  {
    width:"100px",
    hAlign: "left",
  },
  {
    width:"250px",
    className:"my-class"
    formatting:(BanquetCellChildren)=>`${BanquetCellChildren} KB`
  },
]

<BanquetTable columnProps={columns}>
  <BanquetRow>
    <BanquetCell>File size:</BanquetCell>
    <BanquetCell>1000</BanquetCell>
  </BanquetRow>
</BanquetTable>

Styling with stylesheets

Banquet does not include any unnecessary styling, so you can use whatever you please.
However, you can import one of the default stylesheets to get you started.

import "react-banquet/build/css/react-banquet-minimal-style.css";

Or, instead of a default stylesheet you can write your own. We have assigned some default classes to all the elements to make the job easier.

BanquetTable: .banquet
BanquetCell : .banquet .cell

Typescript support

Banquet is written in Typescript, so you can take advantage of type check and autocomplete if your project is using Typescript too.

BanquetColumn

This is the interface for BanquetTable's columnProps.

import {BanquetTable, BanquetRow, BanquetCell, BanquetColumn} from "react-banquet"

const columns: BanquetColumn[] = [
  {
    width: "200px"
  },
  {
    formatting: value => engage(value)
  }
]

<BanquetTable columnProps={columns}>
  <BanquetRow>
    <BanquetCell>Jean-Luc<BanquetCell/>
    <BanquetCell>Picard<BanquetCell/>
  <BanquetRow/>
<BanquetTable />

API reference

The ? mark refers to an optional property.

BanquetTable

BanquetRow

BanquetCell