Is it possible to make a golf scorecard style table?

asavells

I am trying to configure a table to be a pivot style that looks more or less like the following:

Code here:

      <table id="scorecard_table" class="table table-striped table-bordered compact">
            <thead>
                <tr> 
                    <th scope="col" rowspan='2'>Description</th>
                    <th scope="col" colspan='2'>Dates</th>                      
                </tr>
                <tr>
                    <th scope="col">Date 1</th>
                    <th scope="col">Date 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Test Description</th>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>

JS:

var scorecard_table = $('#scorecard_table').DataTable(
{
    dom: "Bfrtip",
    select: true,
    ajax:{
        url:'/eos_scorecard/fetch/' + '5',
    },
    pageLength: 50,
    responsive: {
        details: {
            type: 'column',
            target: 'tr',
        }
    },
    processing:true,
    serverside:true,
    deferRender: true,
    autoWidth: false,
    columns: [     
        { 
            data: 'description',
            render: function (data, type, row) {
                return data;
            },
        },
        {
            defaultContent: '1'
        },
        {
            defaultContent: '2'
        }
    ],
});

The issue is, the date 1 and date 2 columns need to come from a separate datasource. We currently have it set up as a user can set up an event (assign a description) and then we have another model that stores scores/dates related to those events.

The overall goal is to display 1 event per row, and all date/score combinations on the same row.

Any time I try to add the second table into the mix I get errors thrown at me in the console, mostly which are due to mismatching column sizes, but even if I were to get rid of those I am still not sure how to get those events to display horizontally instead of vertically like a traditional table.

colin

The issue is, the date 1 and date 2 columns need to come from a separate datasource.

You can only specify a single data source for DataTables, so you would need to collate that data before initialising the table - either

1. in your server-side PHP script, or
2. on the client, with two Ajax calls to get the data, some code to merge it into a single object, and then initialise the table with that combined data

Colin