How to use the @jenkins-cd/design-language.JTable.column function in @jenkins-cd/design-language

render() {
        const { runs = [], getTimes = x => x, locale, t } = this.props;

        if (!runs.length) {
            return null; // No placeholder for this, it shouldn't be rendered when there's no runs
        }

        const columns = [
            JTable.column(30, '', false), // Status
            JTable.column(60, '', false), // Run
            JTable.column(480, '', true), // Description
            JTable.column(150, '', false), // Duration
            JTable.column(100, '', false), // Completed
        ];

        const children = runs.map(run => {
            if (run.runDetails) {
                // We have populated info

                const runDetails = run.runDetails;
                const runResult = runDetails.result === 'UNKNOWN' ? runDetails.state : runDetails.result;
                const isRunning = runResult === 'RUNNING' || runResult === 'PAUSED' || runResult === 'QUEUED';

                const runDetailsUrl = UrlBuilder.buildRunUrlForDetails(runDetails);

                const { durationInMillis, estimatedDurationInMillis } = runDetails;

                const identifier = getRunIdentifier(runDetails);

value={decodedBranchName}
                onChange={this.navigateToBranch}
                options={pipeline.branchNames.map(b => decodeURIComponent(b))}
            />
        );

        // Build up our column metadata

        const columns = [JTable.column(60, status, false), JTable.column(60, runHeader, false), JTable.column(60, commit, false)];

        if (isMultiBranchPipeline) {
            columns.push(JTable.column(160, 'branches', false));
        }

        columns.push(
            JTable.column(480, message, true),
            JTable.column(100, duration, false),
            JTable.column(100, completed, false),
            JTable.column((actionExtensionCount + actionsInRowCount) * 24, '', false)
        );

        // Build main display table

        const runsTable = showTable && (
            
                
                    {status}
                    {runHeader}
                    {commit}
                    {isMultiBranchPipeline && {branchFilter}}
                    {message}
                    {duration}

const { result, t } = this.props;

        if (!result || !this.pager || this.pager.pendingD) {
            return null;
        }

        const { artifactsZipFile: zipFile } = result;
        const artifacts = this.pager.data;

        const nameLabel = t('rundetail.artifacts.header.name', { defaultValue: 'Name' });
        const sizeLabel = t('rundetail.artifacts.header.size', { defaultValue: 'Size' });
        const displayLabel =  t('rundetail.artifacts.button.display', { defaultValue: 'Display the artifact in new window' });
        const downloadLabel = t('rundetail.artifacts.button.download', { defaultValue: 'Download the artifact' });
        const openLabel = t('rundetail.artifacts.button.open', { defaultValue: 'Open the artifact' });

        const columns = [JTable.column(500, nameLabel, true), JTable.column(120, sizeLabel), JTable.column(50, '')];

        const rootURL = UrlConfig.getJenkinsRootURL();

        const artifactsRendered = artifacts.map(artifact => {
            const urlArray = artifact.url.split('/');
            const fileName = urlArray[urlArray.length - 1];
            logger.debug('artifact - url:', artifact.url, 'artifact - fileName:', fileName);

            let displayLink = null;
            let downloadLink = null;
            if (artifact.downloadable) {
                displayLink = (
                    <a href="{`${rootURL}${artifact.url}/*view*`}" title="{displayLabel}">
                        
                    </a>
                );

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,
        totalNumberOfBranches: 3,
        totalNumberOfPullRequests: 3,
    });

const pipelines = this.pager.data;

        const orgLink = organizationName ? {organizationDisplayName} : '';

        const showPipelineList = pipelines && pipelines.length > 0;
        const showEmptyState = !this.pager.pending && !this.getSearchText() && (!pipelines || !pipelines.length);

        const labelName = translate('home.pipelineslist.header.name', { defaultValue: 'Name' });
        const labelHealth = translate('home.pipelineslist.header.health', { defaultValue: 'Health' });
        const labelBranches = translate('home.pipelineslist.header.branches', { defaultValue: 'Branches' });
        const labelPullReqs = translate('home.pipelineslist.header.pullrequests', { defaultValue: 'PR' });

        const columns = [
            JTable.column(640, labelName, true),
            JTable.column(70, labelHealth),
            JTable.column(70, labelBranches),
            JTable.column(70, labelPullReqs),
            JTable.column(actionExtensionCount * 24, ''),
        ];

        const pipelineRows =
            pipelines &&
            pipelines.map(pipeline => {
                const key = pipeline._links.self.href;
                return ;
            });

        this.props.setTitle('Jenkins');

        return (

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,
        totalNumberOfBranches: 3,
        totalNumberOfPullRequests: 3,

import React from 'react';
import executorInfoService from './ExecutorInfoService';
import { observer } from 'mobx-react';
import { JTable, TableHeaderRow, TableRow, TableCell, StatusIndicator, Icon } from '@jenkins-cd/design-language';

const columns = [
    JTable.column(10, '', false),
    JTable.column(60, 'Computers', true),
];

@observer
export class ExecutorInfoPage extends React.Component {
    render() {
        return (
            
                
                {executorInfoService.computers && executorInfoService.computers.map(computer => [
                    
                        
                            
                        
                        
                            {computer.displayName}

const changeSet = this.pager.data;

        if (!changeSet || !changeSet.length) {
            return ;
        }

        const commitLabel = t('rundetail.changes.header.commit', { defaultValue: 'Commit' });
        const authorLabel = t('rundetail.changes.header.author', { defaultValue: 'Author' });
        const messageLabel = t('rundetail.changes.header.message', { defaultValue: 'Message' });
        const dateLabel = t('rundetail.changes.header.date', { defaultValue: 'Date' });

        const columns = [
            JTable.column(100, commitLabel),
            JTable.column(100, authorLabel),
            JTable.column(500, messageLabel, true),
            JTable.column(100, dateLabel),
        ];

        const changeSetSplitBySource = [];
        changeSet.map(commit => {
            if (changeSetSplitBySource[commit.checkoutCount] === undefined) {
                changeSetSplitBySource[commit.checkoutCount] = [];
            }
            changeSetSplitBySource[commit.checkoutCount].push(commit);
        });

        return (
            <div>
                {changeSetSplitBySource.map((changeSet, changeSetIdx) =&gt; (
                    
                        </div>

const statusHeader = t(`${head}.status`, { defaultValue: 'Status' });
        const healthHeader = t(`${head}.health`, { defaultValue: 'Health' });
        const commitHeader = t(`${head}.commit`, { defaultValue: 'Commit' });
        const branchHeader = t(`${head}.branch`, { defaultValue: 'Branch' });
        const messageHeader = t(`${head}.message`, { defaultValue: 'Message' });
        const completedHeader = t(`${head}.completed`, { defaultValue: 'Completed' });

        const actionColWidth = (actionExtensionCount + actionsInRowCount) * 24;

        const columns = [
            JTable.column(60, healthHeader, false),
            JTable.column(60, statusHeader, false),
            JTable.column(170, branchHeader, false),
            JTable.column(80, commitHeader, false),
            JTable.column(380, messageHeader, true),
            JTable.column(100, completedHeader, false),
            JTable.column(actionColWidth, '', false),
        ];

        return (
            <main>
                <article>
                    
                        
                        {branches.map(branch =&gt; (
                            
                        ))}
                    
                    
                </article>
                {this.props.children}</main>