Editable grid with Tabulator

Sample description

This sample demonstrates the frontend implementation of an editable grid using the Tabulator library. It includes both the HTML markup and the JavaScript configuration for the grid. The data source is managed through a separate CXP page (backend) that provides JSON data. Refer to the Returning a JSON data stream sample in this collection for details on the backend implementation.

Run in new tab

Live editor

<html lang="en">
<head>
    <title>Editable Grid | Xbase++ | Alaska Software</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/resources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/resources/css/custom-bootstrap.min.css">

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_bootstrap3.min.css" rel="stylesheet">
    
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<div class="container">
    <h4 class="mt-4">Editable Grid with Tabulator</h4>
    <p>We are using a simple CXP page to service this grid.</p>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div class="toast text-white bg-warning" id="update-action-toast">
            <div class="d-flex">
                <div class="toast-body" id="update-action-toast-text">
                    Unknown
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
            </div>
        </div>
    </div>
</div>

//Handles the event when a cell is edited in the grid.
    const onCellEdited = (cell) => {
        const data = {
            "id": cell.getRow().getData().id,
            "fieldName": cell.getColumn().getField(),
            "newValue": cell.getValue()
        }
        $.post("suppliers-update.cxp", $.param(data))
            .done(function (data, staus) {
                const message = (data.error) ? "Error: " + data.error : "Updated!";
                showToast(message);
                //reload data in the grid
                table.setData();
            })
            .fail(function (xhr, status, error) {
                showToast("Error: " + error, "bg-danger");
            });
    }

//Represents a Tabulator table instance.
    const table = new Tabulator("#suppliers-table", {
        layout: "fitColumns",
        ajaxURL: "suppliers.cxp",
        ajaxContentType: "json",
        ajaxSorting: true,
        placeholder: "No Data Set",
        pagination: "remote",
        paginationSize: 10,
        initialSort: [
            {column: "id", dir: "asc"}
        ],
        columns: [
            {
                field: "id",
                title: "ID",
                sorter: "number",
                width: 70
            },
            {
                field: "company_na",
                title: "Company",
                sorter: "string",
                editor: true,
                cellEdited: (cell) => onCellEdited(cell),
                validator: "required"
            },
            {
                field: "contact_na",
                title: "Contact",
                sorter: "string",
                editor: true,
                cellEdited: (cell) => onCellEdited(cell),
                validator: "required"
            },
            {
                field: "postal_cod",
                title: "Zip",
                sorter: "string",
                editor: true,
                cellEdited: (cell) => onCellEdited(cell),
                validator: "required"
            },
            {
                field: "city",
                title: "City",
                sorter: "string",
                editor: true,
                cellEdited: (cell) => onCellEdited(cell),
                validator: "required"
            },
            {
                field: "country",
                title: "Country",
                sorter: "string",
                editor: true,
                cellEdited: (cell) => onCellEdited(cell),
                validator: "required"
            }
        ]
    });
</script>
</body>
</html>

<%
    oResponse := DataObject():new()
    oResponse:error := NIL

IF PCount() == 0
        oResponse:error := "No input parameters"
    ELSE
        aData := ::Params:Collection
        oData := DataObject():new()
        FOR i:=1 TO Len(aData)
            oData:setNoIVar(aData[i][1], aData[i][2])
        NEXT
        USE (::PhysicalPath + "supplier-data\supplier.dbf") INDEX (::PhysicalPath + "supplier-data\supplier.cdx")

DbGoTo(Val(oData:id))

IF (!Eof())
            DbrLock()
            nFldPos := FieldPos(oData:fieldname)
            IF nFldPos == 0
                oResponse:error := "Supplier has no field named " + oData:fieldname
            ELSE
                FieldPut(nFldPos, oData:newvalue)
            ENDIF
            DbCommit()
            DbrUnlock()
        ELSE
            oResponse:error := "Can not find the requested supplier"
        ENDIF
    ENDIF

::HttpResponse:ContentType := "application/json"
    ::HttpResponse:WriteBinary(Var2JSON(oResponse))
    ::HttpResponse:finish()
%>

                    Result
                    built with V2 2156
                