Assume you have a sporting event or competition. Most likely the results will be stored in a database and have to be listed on a website. You can use the Fetch API to fetch the data from the backend. This will not be explained in this document. I assume the data has already been retrieved and is an array of records. This array of records has to be in the correct order, but the source function can filter and sort the array on the fly within the report engine.

This document decribes how to define headers and footers very easily and how to arrange record grouping by compare function as well.

Each header function returns html based on static text and parameters currentRecord, objWork and splitPosition. Each footer function returns html based on static text and parameters previousRecord, objWork and splitPosition.

It is very flexible, but you have to make the html yourself! Don't expect a WYSIWYG editor.

General structure of a report

Report has a report header and footer. Can be text or just html or both.
Report has one or more section levels. Section level N starts with header level N and ends with footer level N.
Section level N contains one or more times section level N+1, except the highest section level.
Highest section level contains the data created based on the records in the array. In most cases highest section level is just a html table or html flex item.

Example of report structure

Structure of report definition object called reportDefinition

const reportDefinition = {};
reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = []
reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = []
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // default = () => -1
    // code that returns an integer (report level break number)
};
reportDefinition.display = (currentRecord, objWork) => {
    // code that returns a string, for example
    return `${currentRecord.team} - ${currentRecord.player}`;
};
// source array can be preprocessed, for example filter or sort
reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array
// example to add extra field for HOME and AWAY and sort afterwards
reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }])
    .sort((a, b) => a.team.localeCompare(b.team));
// optional method 'init' which should be a function. It will be called with argument objWork
// can be used to initialize some things.
reportDefinition.init = objWork => { ... };

Examples of headers and footers array elements

reportDefinition.headers = [];
// currentRecord=current record, objWork is extra object,
// splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.headers[1] = '<div>Some string</div>'; // string instead of function is allowed;
reportDefinition.footers = [];
// previousRecord=previous record, objWork is extra object,
// splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.footers[1] = '<div>Some string</div>'; // string instead of function is allowed;

Example of compare function

// previousRecord=previous record, currentRecord=current record, objWork is extra object,
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // please never return 0! headers[0] will be displayed automagically on top of report
    // group by date return 1 (lowest number first)
    if (previousRecord.date !== currentRecord.date) return 1;
    // group by team return 2
    if (previousRecord.team !== currentRecord.team) return 2;
    // assume this function returns X (except -1) then:
    // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record
    // header X upto and include LAST header will be displayed. In case of header function the argument is current record
    // current record will be displayed
    //
    // if both records belong to same group return -1
    return -1;
};

Running counter

In case you want to implement a running counter, you have to initialize/reset it in the right place. It can be achieved by putting some code in the relevant header:

reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => {
    // this is a new level 2 group. Reset objWork.runningCounter to 0
    objWork.runningCounter = 0;
    // put extra code here
    return `<div>This is header number 2: ${currentRecord.team}</div>`;
};

If you only want to initialize objWork.runningCounter at the beginning of the report you can achieve that by putting the right code in reportDefinition.headers[0]. I call it property runningCounter, but you can give it any name you want.

You have to increase the running counter somewhere in your code because... otherwise it is not running 😃 for example:

reportDefinition.display = (currentRecord, objWork) => {
    objWork.runningCounter++;
    // put extra code here
    return `<div>This is record number ${objWork.runningCounter}: ${currentRecord.team} - ${currentRecord.player}</div>`;
};

Most of the time you don't need to manage a running counter in javascript! Most likely data comes from a database which can be queried by SQL. Use the WINDOW function RANK to do the hard work.

How to create totals for multiple section levels, a running total and even a numbered header

// headers
// -----------------------------------------------------
reportDefinition.headers[3] = (record, objWork) => {
    objWork.totalSection3 = 0;
    // Section3 has multiple Section4's inside. We will number those Section4's
    objWork.runningCounterSection4 = 0;
    // any other code that is necessary and display the header
    return 'any string';
};
reportDefinition.headers[4] = (record, objWork) => {
    objWork.runningCounterSection4++;
    // any other code that is necessary and display the header
    return `${objWork.runningCounterSection4}: text header 4`;
};
reportDefinition.headers[5] = (record, objWork) => {
    objWork.totalSection5 = 0;
    // any other code that is necessary and display the header
    return 'any string';
};
reportDefinition.headers[6] = (record, objWork) => {
    objWork.totalSection6 = 0;
    // any other code that is necessary and display the header
    return 'any string';
};
// footers
// -----------------------------------------------------
reportDefinition.footers[3] = (record, objWork) => {
    // no extra code needed
    // any other code that is necessary and display the footer
    // most likely you display objWork.totalSection3 here
    return `<h4>League above total: ${objWork.totalSection3}</h4>`;
};
reportDefinition.footers[4] = (record, objWork) => {
    // no extra code needed
    // any other code that is necessary and display the footer
    // if you want you can display objWork.totalSection3 as running total
    // it will be a running total because reportDefinition.headers[4] didn't reset objWork.totalSection3
    return `<h4>League above running total: ${objWork.totalSection3}</h4>`;
};
reportDefinition.footers[5] = (record, objWork) => {
    // no extra code needed
    // any other code that is necessary and display the footer
    // most likely you display objWork.totalSection5 here
    return `<h4>State above total: ${objWork.totalSection5}</h4>`;
};
reportDefinition.footers[6] = (record, objWork) => {
    // no extra code needed
    // any other code that is necessary and display the footer
    // most likely you display objWork.totalSection6 here
    return `<h4>City above total: ${objWork.totalSection6}</h4>`;
};
// -----------------------------------------------------
reportDefinition.display = (record, objWork) => {
    // 'amount' is the field to totalize
    const { amount } = record;
    objWork.totalSection3 += amount;
    objWork.totalSection5 += amount;
    objWork.totalSection6 += amount;
    // diplay the record
    return 'string containing record details';
};

How to preprocess the source array on the fly (for example in click event)

// <div id="playersListContainer">
//    <span class="ks_clickable">All Players</span> <span class="ks_clickable">John Doe</span> <span class="ks_clickable">Peter Pan</span> <span class="ks_clickable">Jim Baker</span> <span class="ks_clickable">Harry Potter</span>
// </div>
// <div id="mainOutput"></div>
document.getElementById('playersListContainer').addEventListener('click', e => {
    if (e.target.matches('.ks_clickable')) {
        e.currentTarget.querySelector('.ks_clickable.ks_clicked')?.classList.remove('ks_clicked');
        e.target.classList.add('ks_clicked');
        // define extra filtering depending on which player name you clicked
        const preProcess = {};
        if (e.target.textContent !== 'All Players') {
            preProcess.source = (arr, objWork) => arr.filter(record => [record.Player1, record.Player2].includes(e.target.textContent));
        }
        // create a shallow copy of the reportDefinition by object spreading and add properties of preProcess as well
        // dataPlayersDetails = data fetched from database
        document.getElementById('mainOutput').innerHTML = createOutput({ ...reportDefinition, ...preProcess })(dataPlayersDetails);
        // in case dataPlayersDetails is a Promise:
        // dataPlayersDetails.then(data => {document.getElementById('mainOutput').innerHTML = createOutput({ ...reportDefinition, ...preProcess })(data)});
    }
});

How to generate the report

// reportDefinition has to be defined first
const report = createOutput(reportDefinition, objWork); // objWork isn't needed most of the time
// variable data: array of records to be processed
document.getElementById('id of html element') = report(data);

Source code

Below source code I created to make this all work. It is kind of wrapper function for all headers and footers. Feel free to copy paste it and use it in your own module.

export const createOutput = (reportDefinition, objWorkOrig) => thisData => {
    // compare: compare function. (function arguments are previous record and current record).
    // display: function that displays the record (function argument is current record).
    // footers: array of footers. Footer can be a function (function argument is previous record).
    // headers: array of headers. Header can be a function (function argument is current record).
    // objWork: extra object passed to compare, display, headers, footers, init and source.
    // headers and footers have a third argument. It is the relative breakpoint to 'splitCode'.
    // source is function to preprocess thisData.
    const objWork = { ...objWorkOrig, rawData: thisData };
    const { compare = () => -1, display, footers = [], headers = [], init = () => { }, source = arr => arr } = reportDefinition;
    const outputSeparator = (sepArr, reverse) => (record, splitCode) =>
        sepArr.slice(splitCode)[reverse ? 'reduceRight' : 'reduce']((accumulator, fun, i) => accumulator + ((typeof fun === 'function') ? fun(record, objWork, i) : fun), '');
    // outputHeader or outputFooter: fun will be invoked with third argument 0 if this is header/footer belonging to splitCode.
    // Third argument will be 1 for the next header/footer that is triggered automatically. Possibly there are more
    // headers/footers... they get 2, 3, and so on as third argument
    const outputHeader = outputSeparator(headers, false);
    const outputFooter = outputSeparator(footers, true);
    // optionally do some initializing work
    init(objWork);
    const arrRecords = source(thisData, objWork);
    let report = '';
    for (const [index, currentRecord] of arrRecords.entries()) {
        const isFirstRecord = index === 0;
        const previousRecord = arrRecords[index - 1];
        const splitCode = isFirstRecord ? 0 : compare(previousRecord, currentRecord, objWork);
        const isLastRecord = index === arrRecords.length - 1;
        const isSameGroup = splitCode === -1;
        if (!isSameGroup) {
            // only display footer if not first record
            // if so, footer begins at level splitCode. Of course in reverse order
            if (!isFirstRecord) report += outputFooter(previousRecord, splitCode);
            // header begins at level splitCode
            report += outputHeader(currentRecord, splitCode);
        }
        report += display(currentRecord, objWork);
        // if last element, display all footers. Of course in reverse order
        if (isLastRecord) report += outputFooter(currentRecord, 0);
    };
    return report;
};

What is objWork

objWork is a javascript object that is passed as the second argument to createOutput function (optional argument, default {}). It is passed on as shallow copy to headers functions, footers functions, compare function, init function, source function and display function. All these functions share this object. You can use it for example for configuration information or color scheme. objWork is automagically extended with { rawData: thisData }. For example createOutput(reportDefinition, { font: 'Arial', font_color: 'blue' })(thisData).