Nefarious Pickle Muncher

    This package has been deprecated

    Author message:

    The Australian Government Design System has been decommissioned. Visit https://community.digital.gov.au/t/dta-design-system-has-been-decommissioned/4649 for more information.

    @gov.au/table

    0.2.1 • Public • Published

    @gov.au/table

    Used to display tabular data

    Contents


    Install

    yarn add @gov.au/table
    npm install @gov.au/table

    back to top


    Dependency graph

    table
    └─ core

    back to top


    Tests

    The visual test: https://auds.service.gov.au/packages/table/tests/site/

    back to top


    Release History

    • v0.2.1 - Update core package dependency to use the latest version
    • v0.2.0 - Refactor sass, first cell header option
    • v0.1.3 - Remove pancake js plugin from package json
    • v0.1.2 - Utilise the font-variant property for numeric table cells
    • v0.1.1 - Update font for numerical cells
    • v0.1.0 - 💥 Initial version

    back to top


    License

    Copyright (c) Commonwealth of Australia. Licensed under MIT.

    back to top

    };

    Usage

    back to top


    React

    Usage:

    import AUtable, {AUtableResponsiveWrapper, AUtableCaption, AUtableCell, AUtableHead, AUtableHeader, AUtableBody, AUtableRow} from '@gov.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
    <AUtable
    	caption="Example table"
    	headers={[
    						{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"},
    					]}
    	data = {[
    					{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"]}
    				]}
    />
    
    //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>

    All props:

    <AUTable
    	caption="Population of Australian states and territories, December 2015"
    	headers={[]}               {/* The table headers */}
    	data={[]}                  {/* The table body data */}
    	firstCellIsHeader={true}   {/* Is first cell in table body rows a header*}
    	striped={true}             {/* Striped version of the table*/}
    	className=""               {/*An additional class, optional*/}
    	/>
    
    <AUtableBody 
    className=""                 {/*An additional class, optional*/}
    />
    
    <AUtableHead 
    className=""                 {/*An additional class, optional*/}
    />
    
    <AUtableHeader /
    title="Population"           {/*The title of the column/header*/}
    type="numeric"               {/*The type of the column data, 'numeric' for right align, 'text' for left aligned*/}
    width="75"                   {/*Width of the header/column. Can be either 25, 33, 50 or 75*/}
    scope="col"                  {/*Scope of the header, can be either row or column*/}
    className=""                 {/*An additional class, optional*/}
    >
    
    <AUtableCell 
    data="7,950,500"             {/*The cell data*/}
    type="numeric"               {/*The type of the column data, 'numeric' for right align, 'text' for left aligned*/}
    className=""                 {/*An additional class, optional*/}
    />
    
    <AUtableRow 
    className=""                 {/*An additional class, optional*/}
    />
    
    <AUtableCaption 
    tableCaption="Dates and amounts"     {/*Title of the table*/}
    className=""                         {/*An additional class, optional*/}
    />
    
    // Table wrapper for responsive tables
    <AUtableResponsiveWrapper /> 
    
    />

    Install

    npm i @gov.au/table

    DownloadsWeekly Downloads

    43

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    67.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • rmullen