dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Table

v0.2.0

Used to display tabular data.

Released

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

Default table

For data tables with a small amount of rows use the default table. Align text columns and corresponding data cells to the left. When comparing numbers in a column, align data cells and column headers to the right.

Example

<!--
Row header:  <th class="au-table__header" scope="row">
Column header:  <th class="au-table__header" scope="col">
-->

<table class="au-table">
    <caption class="au-table__caption">Population of Australian states and territories, December 2015</caption>
    <thead class="au-table__head">
        <tr class="au-table__row">
            <th scope="col" class="au-table__header">Location</th>
            <th scope="col" class="au-table__header au-table__header--numeric">Population</th>
            <th scope="col" class="au-table__header au-table__header--numeric">Change over previous year %</th>
        </tr>
    </thead>
    <tbody class="au-table__body">
        <tr class="au-table__row">
            <td class="au-table__cell">New South Wales</td>
            <td class="au-table__cell au-table__cell--numeric">7,670,700</td>
            <td class="au-table__cell au-table__cell--numeric">3.1%</td>
        </tr>
        <tr class="au-table__row">
            <td class="au-table__cell">Victoria</td>
            <td class="au-table__cell au-table__cell--numeric">5,996,400</td>
            <td class="au-table__cell au-table__cell--numeric">2.5%</td>
        </tr>
        <tr class="au-table__row">
            <td class="au-table__cell">Tasmania</td>
            <td class="au-table__cell au-table__cell--numeric">517,400</td>
            <td class="au-table__cell au-table__cell--numeric">4.0%</td>
        </tr>
    </tbody>
</table>
import AUtable, {AUtableResponsiveWrapper, AUtableHead, AUtableRow, AUtableBody, AUtableHeader, AUtableCell } from "@gov.au/table";

const simpleData = [
    {population: "7,670,700",     location: "New South Wales"},
    {location: "Victoria",        population: "5,996,400"},
    {location: "Tasmania",        population: "514,400"}
];

const simpleHeaders = [
    {title: "Location",   key: "location"},
    {title: "Population", key: "population", type: 'numeric'}
];

<AUtableResponsiveWrapper>
    <AUtable
        caption="Population of Australian states and territories, December 2015"
        headers={simpleHeaders}
        data={simpleData}
    />
</AUtableResponsiveWrapper>


/*
    Row header:  <AUtableHeader scope="row" />
    Column header:  <AUtableHeader scope="col" />
*/

//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>

Custom header widths

Use custom widths based on the expected length of the data under each corresponding column. By default the table is full width, however the table can be used with the grid to take up a desired amount of horizontal space on the page. Wrapping the table element in a <div class="au-table__wrapper"> allows for horizontal scrolling on smaller devices. This is especially useful for tables with a larger number of columns.

Example

<!--
Width 10%:  <th class="au-table__header au-table__header--width-10">
Width 20%:  <th class="au-table__header au-table__header--width-20">
Width 25%:  <th class="au-table__header au-table__header--width-25">
Width 33%:  <th class="au-table__header au-table__header--width-33">
Width 50%:  <th class="au-table__header au-table__header--width-50">
Width 75%:  <th class="au-table__header au-table__header--width-75">
-->

<div class="au-table__wrapper">
    <table class="au-table">
        <caption class="au-table__caption">Population of Australian states and territories, December 2015</caption>
        <thead class="au-table__head">
            <tr class="au-table__row">
                <th scope="col" class="au-table__header au-table__header--width-50">Location</th>
                <th scope="col" class="au-table__header au-table__header--numeric au-table__header--width-25">Population</th>
                <th scope="col" class="au-table__header au-table__header--numeric au-table__header--width-25">Change over previous year %</th>
            </tr>
        </thead>
        <tbody class="au-table__body">
            <tr class="au-table__row">
                <td class="au-table__cell">New South Wales</td>
                <td class="au-table__cell au-table__cell--numeric">7,670,700</td>
                <td class="au-table__cell au-table__cell--numeric">3.1%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Victoria</td>
                <td class="au-table__cell au-table__cell--numeric">5,996,400</td>
                <td class="au-table__cell au-table__cell--numeric">2.5%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Tasmania</td>
                <td class="au-table__cell au-table__cell--numeric">517,400</td>
                <td class="au-table__cell au-table__cell--numeric">4.0%</td>
            </tr>
        </tbody>
    </table>
</div>
import AUtable, {AUtableResponsiveWrapper} from "@gov.au/table";

const simpleHeaders = [
    {title: "Location",                    key: "location",   width: '50'},
    {title: "Population",                  key: "population", width: '25', type: 'numeric'},
    {title: "Change over previous year %", key: "changeYear", width: '25', type: 'numeric'}

];

const simpleData = [
        {location: "New South Wales", population: "7,670,700", changeYear: "3.1%"},
        {location: "Victoria",        population: "5,996,400", changeYear: "2.5%"},
        {location: "Tasmania",        population: "517,400",   changeYear: "4.0%"}
];


<AUtableResponsiveWrapper>
    <AUtable
        caption="Population of Australian states and territories, December 2015"
        headers={simpleHeaders}
        data={simpleData}
    />
</AUtableResponsiveWrapper>

Striped table

For data tables with more rows, use the striped alternative.

Example

<div class="au-table__wrapper">
    <table class="au-table au-table--striped">
        <caption class="au-table__caption">Population of Australian states and territories, December 2015</caption>
        <thead class="au-table__head">
            <tr class="au-table__row">
                <th scope="col" class="au-table__header au-table__header--width-25">Location</th>
                <th scope="col" class="au-table__header au-table__header--numeric au-table__header--width-25">Population</th>
                <th scope="col" class="au-table__header au-table__header--numeric au-table__header--width-25">Change over previous year %</th>
                <th scope="col" class="au-table__header au-table__header--numeric au-table__header--width-25">Change over previous decade %</th>
            </tr>
        </thead>
        <tbody class="au-table__body">
            <tr class="au-table__row">
                <td class="au-table__cell">New South Wales</td>
                <td class="au-table__cell au-table__cell--numeric">7,670,700</td>
                <td class="au-table__cell au-table__cell--numeric">3.1%</td>
                <td class="au-table__cell au-table__cell--numeric">12.9%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Victoria</td>
                <td class="au-table__cell au-table__cell--numeric">5,996,400</td>
                <td class="au-table__cell au-table__cell--numeric">2.5%</td>
                <td class="au-table__cell au-table__cell--numeric">9.3%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Queensland</td>
                <td class="au-table__cell au-table__cell--numeric">4,808,800</td>
                <td class="au-table__cell au-table__cell--numeric">1.7%</td>
                <td class="au-table__cell au-table__cell--numeric">13.3%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Western Australia</d>
                <td class="au-table__cell au-table__cell--numeric">2,603,900</td>
                <td class="au-table__cell au-table__cell--numeric">2.3%</td>
                <td class="au-table__cell au-table__cell--numeric">11.6%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">South Australia</td>
                <td class="au-table__cell au-table__cell--numeric">1,702,800</td>
                <td class="au-table__cell au-table__cell--numeric">2.0%</td>
                <td class="au-table__cell au-table__cell--numeric">6.8%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Tasmania</td>
                <td class="au-table__cell au-table__cell--numeric">517,400</td>
                <td class="au-table__cell au-table__cell--numeric">4.0%</td>
                <td class="au-table__cell au-table__cell--numeric">5.3%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Northern Territory</td>
                <td class="au-table__cell au-table__cell--numeric">244,000</td>
                <td class="au-table__cell au-table__cell--numeric">1.2%</td>
                <td class="au-table__cell au-table__cell--numeric">4.5%</td>
            </tr>
            <tr class="au-table__row">
                <td class="au-table__cell">Australian Capital Territory</td>
                <td class="au-table__cell au-table__cell--numeric">393,000</td>
                <td class="au-table__cell au-table__cell--numeric">2.4%</td>
                <td class="au-table__cell au-table__cell--numeric">9.6%</td>
            </tr>
        </tbody>
    </table>
</div>
import AUtable, {AUtableResponsiveWrapper} from "@gov.au/table";

const detailedPopulationData = [
    {location: "New South Wales",              population: "7,670,700", changeYear: "3.1%", changeDecade: "12.9%" },
    {location: "Victoria",                     population: "5,996,400", changeYear: "2.5%", changeDecade: "9.3%"},
    {location: "Queensland",                   population: "4,808,800", changeYear: "1.7%", changeDecade: "13.3%"},
    {location: "Western Australia",            population: "2,603,900", changeYear: "2.3%", changeDecade: "11.6%"},
    {location: "South Australia",              population: "1,702,800", changeYear: "2.0%", changeDecade: "6.8%"},
    {location: "Tasmania",                     population: "517,400",   changeYear: "4%",   changeDecade: "5.3%"},
    {location: "Nothern Territory",            population: "244,400",   changeYear: "1.2%", changeDecade: "4.5%"},
    {location: "Australian Capital Territory", population: "393,000",   changeYear: "2.4%", changeDecade: "9.6%"},

];

const detailedPopulationDataHeaders = [
    {title: "Location",                     key: "location"},
    {title: "Population",                   key: "population",    type: 'numeric',},
    {title: "Change over previous year %",  key: "changeYear",    type: 'numeric',},
    {title: "Change over previous decade %", key: "changeDecade", type: 'numeric',},
];


<AUtableResponsiveWrapper>
    <AUtable
        caption="Population of Australian states and territories, December 2015"
        headers={detailedPopulationDataHeaders}
        data={detailedPopulationData}
        striped={true}
    />
</AUtableResponsiveWrapper>