Cell formatting?

[ClaytonFarr]

@muonw thanks for sharing all of your work on this.

It's a great option for Svelte data tables with UI options baked-in.

One limitation I'm hitting is sorting out how to format cell contents - e.g. convert a url string into a clickable link.

Is this something that's possible today?

[muonw-public]

Yes, it's possible. You can find an example here: https://muonw.github.io/powertable/examples/example2

Basically, you need to use the customParse property of the userFunctions as demonstrated below.

let ptData = [
    {"id": 1, "url": "https://www.example.com"},
    {"id": 2, "url": "https://google.com"}
];

let ptInstructs = [];

let ptOptions = {
    userFunctions: {
        customParse: url2link
    }
}

function url2link(pageData) {
    pageData.forEach(row => {
        row['url'] = `<a href="${row['url']}">${row['url']}</a>`;
    });

    return pageData;
}

<PowerTable {ptInstructs} {ptOptions} {ptData} />

[ClaytonFarr]

Perfect, that's great to see. I must have missed it. Thank again

[ClaytonFarr]

@muonw Is it possible to pass multiple functions to customParse or should all formatting be contained in one? Not able to sort out right syntax for multiple functions if that does exist.

[muonw-public]

You can put all the operations in a single function, or you can define one function and call any other functions from within that like this:

function myParsingFunction(pageData) {
    pageData = myLinkConverter(pageData);
    pageData = myOtherFunction(pageData);
    //...
    return pageData;
}

[ClaytonFarr]

Makes sense, thanks again @muonw