List data from a doctype in web page

Frappe Framework Customization
15

Hello

I struggled with this problem for a while now in v12…

I managed to get frappe.table in a custom page this way:

const assets = [
    "/assets/frappe/css/frappe-datatable.css",
    "/assets/frappe/js/lib/clusterize.min.js",
    "/assets/frappe/js/lib/Sortable.min.js",
    "/assets/frappe/js/lib/frappe-datatable.js"
];

frappe.require(assets, () => {
    console.log("Assets Loaded");
    tableInit();
});
var tableInit = function () {
    console.log("tableInit called");
    this.datatable1 = new DataTable('#mydt1', {
        columns: [
            'Framework',
            'Built By',
            'GitHub Stars',
            'Project Link', //format: value => `<a class="text-primary" href="${value}">${value}</a>`
            'ActionButton'
        ],
        data: [
            ['React', 'Facebook', 105773, 'https://github.com/facebook/react', '<i class="octicon octicon-comment-discussion"></i>'],
            ['Angular', 'Google', 38153, 'https://github.com/angular/angular', '<i class="octicon octicon-comment-discussion"></i>'],
            ['Vue', 'Evan You', 106640, 'https://github.com/vuejs/vue', '<i class="octicon octicon-comment-discussion"></i>'],
            ['Stencil', 'Ionic Team', 3238, 'https://github.com/ionic-team/stencil', '<i class="octicon octicon-comment-discussion"></i>']
        ],
        clusterize: false,
        freezeMessage: "..Please Wait.."
    });
};

You can include filters I think just like in a report…

As for the data you can do a frappe js call to populate your data from there on.

However most form functionality is present with single doctypes as alluded here (how to add grid table to page).

I hope this helps