Table

v1.0.0

Used to display tabular data.

Released

History
View changes
Install
npm i @gold.au/table
Tags
Requires
Contributors
  • Adam Zerella avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Raj Ghuman avatar picture

React Usage

import AUtable, {AUtableResponsiveWrapper, AUtableCaption, AUtableCell, AUtableHead, AUtableHeader, AUtableBody, AUtableRow} from '@gold.au/table';


//simple example
<AUtable 
    caption="Population of Australian states and territories, December 2015"
    headers={[
        {title: "Location",   key: "location"},
        {title: "Population", key: "population", type: 'numeric'}
    ]}
    data={[
        {population: "7,670,700",     location: "New South Wales"},
        {location: "Victoria",        population: "5,996,400"},
        {location: "Tasmania",        population: "514,400"}
    ]}
/>
 
//complex example, using custom rendering for rows
const complexHeaders = [
            {
                title: "Name",
                width: '50',
                key: "name" 
            },
            {
                title: "Interests", 
                width: '20',
                key: "interests",
                render: ( data, row ) => (
                    <ul> {data.map(( data ) => (
                        <li key={data}>{ data }</li>
                        )
                    )}
                    </ul>
                )
            },
            {
                title: "Actions",
                width: '20',
                render: ( data, row ) => (
                    <span>
                        <a href="#">Remove {row.name}</a> | <a href="#"> Update {row.name}</a>
                    </span>
                )
            },
            {
                title: "Age",
                width: '10',
                key: "age",
                type: "numeric"
            },
            ];

            const complexData = [
                {name: "Bob Davidson",   age: "48", interests: ["photography", "reading"]},
                {name: "Jane Williamson",  age: "25", interests: ["basketball", "exercise", "hockey"]},
                {name: "Sally Robertson", age: "35", interests: ["Road trips", "Painting"]}
            ];

<AUtable
    caption="Example table"
    headers={complexHeaders}
    data = {complexData}
/>


//Using individual components
<table className="au-table">
    <AUtableHead>
        <AUtableRow>
            <AUtableHeader type="text" title="Location"/>
            <AUtableHeader type="numeric" title="Population"/>
            <AUtableHeader type="numeric" title="Change over previous year %"/>
        </AUtableRow>
    </AUtableHead>
    <AUtableBody>
        <AUtableRow>
            <AUtableCell data="New South Wales" type="text" />
            <AUtableCell data="7,670,700" type="numeric"/>
            <AUtableCell data="3.1%" type="numeric"/>
        </AUtableRow>
        <AUtableRow>
            <AUtableCell data="Victoria" type="text" />
            <AUtableCell data="5,996,400" type="numeric" className="bold-cell" />
            <AUtableCell data="2.5%" type="numeric"/>
        </AUtableRow>
    </AUtableBody>
</table>

Props

AUtable

Prop name Type Description
caption string The table caption summary
headers array The table column headers
headers[0].title string The table column header title text
headers[0].type string Type of the header, can be either text or numeric for left or right alignment respectively.
headers[0].width string The width (%) of the header. Can be either 10, 20, 25, 33, 50 or 75
headers[0].key string The key used in the corresponding row of data
headers[0].render function A function used to customise rendering for the corresponding data cells
data array The table data in the body
data[0] string The first row of data in the body.
data[0].example array The value of the cell for key example. This will correspond with the header that has the example key
striped bool A striped variation of the component
className string An additional class, optional

All other props are spread into the component

AUtableHeader

Prop name Type Description
title string The table column header title text
scope string Can either be a row or col, default is col
type string Type of the header, can be either text or numeric for left or right alignment respectively.
width string The width of the header. Can be either 10, 20, 25, 33, 50 or 75
className string An additional class, optional

AUtableCell

Prop name Type Description
data string The cell data
type string Type of the cell, can be either text or numeric for left or right alignment respectively.
className string An additional class, optional

AUtableBody

Prop name Type Description
className string An additional class, optional

AUtableHead

Prop name Type Description
className string An additional class, optional

AUtableRow

Prop name Type Description
className string An additional class, optional

AUtableCaption

Prop name Type Description
tableCaption string Caption (or title) of the table
className string An additional class, optional

Exports

Name Type Description
AUtable default The table component
AUtableResponsiveWrapper named A responsive wrapper for a table
AUtableCaption named Table caption
AUtableCell named An individual table cell
AUtableHead named The table head container
AUtableHeader named A table header
AUtableBody named The table body component
AUtableRow named The table row component

node_modules import

import AUtable, {AUtableResponsiveWrapper, AUtableCaption, AUtableCell, AUtableHead, AUtableHeader, AUtableBody, AUtableRow} from '@gold.au/table';

pancake import

import AUtable, {AUtableResponsiveWrapper, AUtableCaption, AUtableCell, AUtableHead, AUtableHeader, AUtableBody, AUtableRow}  from './table';

Related components

Feedback