Simple React table

Simple Table

There was no easy way how to create table in with PF3 React. The only option is using reactabular which is unnecessary for your simple tables with no filtering, pagination etc.

We have added style tabled components and very basic Table component which is rendered from data.

Styled components

• <Table /> is equivalent to <table>
• <TableHead /> is equivalent to <thead>
• <TableBody /> is equivalent to <tbody>
• <TableRow /> is equivalent to <tr>
• <TableHeading /> is equivalent to <th>
• <TableCell /> is equivalent to <td>

Components accept all standard table props.

All of these components are available to import from app/javascript/components/simple-table/simple-table.jsx.

DataDrivenTable

Uses above mentioned components to render table from data structure.

Props

columns

columns = [
  [
    'column-foo'// column identifier,
    'Column Foo title'// column title,
    { // additional props of table cell in column. This is optional.
      className: 'pf-action',
      onClick: Function
    }
  ], [
    'column-bar',
    'Different title'
  ]
]

rows

rows = [{
  'column-foo': 'Content' // rendered content of first row and column with name 'column-foo',
  'column-bar': <button onClick={...}>Button</button> // content can be also react component
}]

id?

Id of the table

...props

Any other props given DataDrivenTable component directly will be passed to the to <Table />