Launchpad Style Guide

Table

How to use

We use a small JS function to find all table tags on the page and wrap them in a div.table-wrapper, which overflows the content on mobile and displays a horizontal scrollbar.

3rd Party Table Plugins

Highly recommend DataTables and React Table (Clipsal FlexSelect). Both are extremely full featured and flexible.

Table Example

Heading	Heading	Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Donec ultrices tincidunt arcu non sodales neque sodales ut.	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%

Table with Banded Rows

Heading	Heading	Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Donec ultrices tincidunt arcu non sodales neque sodales ut.	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%

<table class="banded-rows">
                <thead>
                    <tr>
                        <td>Heading</td>
                        <td>Heading</td>
                        <td>Heading</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Donec ultrices tincidunt arcu non sodales neque sodales ut. </td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                </tbody>
            </table>

Table with Shaded Column

Heading	Heading	Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Donec ultrices tincidunt arcu non sodales neque sodales ut.	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%
Content	Content	15.6%

<table class="shaded-column">
                <thead>
                    <tr>
                        <td>Heading</td>
                        <td>Heading</td>
                        <td>Heading</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices dui sapien eget mi proin sed. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Donec ultrices tincidunt arcu non sodales neque sodales ut. </td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>15.6%</td>
                    </tr>
                </tbody>
            </table>

Table with Shaded Column & Rowspan

Sector	Transportation	Utilities	Energy	Digital	Social infrastructure
Asset types	Toll roads	Gas & Electric	Renewables	Telecomunications	Education
	Airports	Water & Wastewater	Gas processing	Data storage	Aged care
	Seaports	District heating/cooling	pipelines		Government
	Rail		Energy storage		Public transpor
			Diversified

<table class="shaded-column-with-rowspan">
                <tbody>
                    <tr>
                        <th>Sector</th>
                        <th>Transportation</th>
                        <th>Utilities</th>
                        <th>Energy</th>
                        <th>Digital</th>
                        <th>Social infrastructure</th>
                    </tr>
                    <tr>
                        <td rowspan="5">Asset types</td>
                        <td>Toll roads</td>
                        <td>Gas & Electric</td>
                        <td>Renewables</td>
                        <td>Telecomunications</td>
                        <td>Education</td>
                    </tr>
                    <tr>
                        <td>Airports</td>
                        <td>Water & Wastewater</td>
                        <td>Gas processing</td>
                        <td>Data storage</td>
                        <td>Aged care</td>
                    </tr>
                    <tr>
                        <td>Seaports</td>
                        <td>District heating/cooling</td>
                        <td>pipelines</td>
                        <td> </td>
                        <td>Government</td>
                    </tr>
                    <tr>
                        <td>Rail</td>
                        <td> </td>
                        <td>Energy storage</td>
                        <td> </td>
                        <td>Public transpor</td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td>Diversified</td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>

Launchpad Style Guide

Table

How to use

3rd Party Table Plugins

Table Example

Table with Banded Rows

Table with Shaded Column

Table with Shaded Column & Rowspan

Figma reference

Menu

Pages

Sections

Components

Core Elements

Core Css