Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-banquet

0.4.1 • Public • Published

CircleCI Travis (.com) GitHub package.json version GitHub last commit Codecov

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

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

Name Type Default Description
children BanquetRow nodes The rows of the table
borders? "all" | "none" | "horizontal" | "vertical" | "outer" | "inner" |
"horizontal-inner" | "vertical-inner" | "horizontal-outer" | "vertical-outer"
"all" The visible borders
columnProps? {
  width?: string
  className?: string
  hAlign?: "left" | "center" | "right"
  vAlign?: "top" | "center" | "bottom"
  formatting?: (CellChildren: any) => ReactNode
}[ ]
width: auto

hAlign: center
vAlign: center
The columns' properties
className? string A className to apply to the table
hAlign? "left" | "center" | "right" "center" Horizontal alignment to apply to the table
vAlign? "top" | "center" | "bottom" "center" Vertical alignment to apply to the table

BanquetRow

Name Type Default Description
children BanquetCell nodes The row cells
header? boolean false Whether to apply header styles to all the cells in the row
className? string A className to apply to all the cells in that row
hAlign? "left" | "center" | "right" "center" Horizontal alignment to apply to the row
vAlign? "top" | "center" | "bottom" "center" Vertical alignment to apply to the row
rowHeight? string auto The row's height

BanquetCell

Name Type Default Description
children any The content of the cell
header boolean false Whether to apply header styles
className string The className to apply to the cell
hAlign? "left" | "center" | "right" "center" Horizontal alignment to apply to the cell
vAlign? "top" | "center" | "bottom" "center" Vertical alignment to apply to the cell

Install

npm i react-banquet

DownloadsWeekly Downloads

8

Version

0.4.1

License

MIT

Unpacked Size

70.7 kB

Total Files

55

Last publish

Collaborators

  • avatar