Grid lite pagination alignment controls

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/[email protected]" type="module"></script>

<div id="container"></div>

<div class="content">
    Use the controls below to change pagination position and alignment.
    Custom position uses a dedicated pagination theme, but is not required. Remove
    <code>hcg-theme-default custom-pagination-theme</code> from the wrapping element to
    style from scratch.
</div>

<div id="custom-position" class="hcg-container hcg-theme-default custom-pagination-theme"></div>

<div class="highcharts-controls-wrapper">
    <highcharts-controls target="#container">
        <highcharts-group header="Pagination position and alignment">
            <highcharts-control type="select" path="pagination.position" options="top, bottom, footer, #custom-position"
                value="bottom">
            </highcharts-control>
            <highcharts-control type="select" path="pagination.align" options="left,center,right,distributed"
                value="distributed">
            </highcharts-control>
        </highcharts-group>
    </highcharts-controls>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css");

#container,
#custom-position,
.content,
.highcharts-controls-wrapper {
    margin: 10px;
}

#custom-position {
    margin-bottom: 20px;
}
.custom-pagination-theme,
.highcharts-light .custom-pagination-theme {
    --hcg-pagination-background: #fff7f7;
    --hcg-color: #8c4e4e;
    --hcg-button-color: #8c4e4e;
    --hcg-pagination-button-selected-background: #8c4e4e;
}

JavaScript

function generateRandomData(rows) {
    const names = ['John', 'Jane', 'Alex', 'Chris', 'Katie', 'Michael'];
    const departments = ['HR', 'Engineering', 'Sales', 'Marketing', 'Finance'];
    const positions = ['Manager', 'Developer', 'Analyst', 'Director'];
    const columns = {
        ID: [],
        Name: [],
        Department: [],
        Position: [],
        Email: []
    };

    for (let i = 0; i < rows; i++) {
        const nameIndex = i < names.length ?
            i : Math.floor(Math.random() * names.length);
        const departmentIndex = Math.floor(Math.random() * departments.length);
        const positionIndex = Math.floor(Math.random() * positions.length);
        const id = i + 1;
        const name = names[nameIndex];
        const department = departments[departmentIndex];
        const position = positions[positionIndex];

        columns.ID.push(id);
        columns.Name.push(name);
        columns.Department.push(department);
        columns.Position.push(position);
        columns.Email.push(`${name.toLowerCase()}@company.com`);
    }

    return columns;
}

Grid.grid('container', {
    data: {
        columns: generateRandomData(120)
    },
    pagination: {
        enabled: true,
        pageSize: 10,
        controls: {
            pageSizeSelector: true,
            pageInfo: true,
            firstLastButtons: true,
            previousNextButtons: true,
            pageButtons: {
                enabled: true,
                count: 9
            }
        }
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 800
            },
            gridOptions: {
                pagination: {
                    controls: {
                        firstLastButtons: false,
                        pageButtons: {
                            count: 5
                        }
                    }
                }
            }
       ...