Embedding custom HTML inside table cells

[rsgilbert]

Is there a way to render custom html inside table cells?

I am trying to use active-table to render a list page. The first column is supposed to have links that open another page.

Currently, the examples on the activetable.io website are all about rendering a table with data. I am not finding any example of a table with html inside the cells.

<ActiveTable
                data={activeTableData}
                tableStyle={{
                    width: '100%',
                }}

                displayAddNewColumn={false}
                frameComponentsStyles={{
                    styles: {
                        default: {
                            // backgroundColor: 'pink'
                        }
                    }
                }}
                headerStyles={{
                    default: {
                        backgroundColor: 'pink'
                    }
                }}
                rowHoverStyles={{
                    style: {
                        backgroundColor: '#d6d6d630',
                        "transitionDuration": "0.1s"
                    }
                }}
                // stripedRows={{
                //     odd: {
                //         backgroundColor: ''
                //     },
                //     even: {
                //         backgroundColor: '#ebebeb7a'
                //     }
                // }}
                rowDropdown={{
                    displaySettings: {
                        isAvailable: false
                    },
                    canEditHeaderRow: false
                }}
                columnDropdown={{
                    displaySettings: {

                        // isAvailable: false

                    },
                    isInsertLeftAvailable: false,
                    isInsertRightAvailable: false,
                    // is
                }}
                filter={true}
                isCellTextEditable={false}
                allowDuplicateHeaders={false}
                contentEditable={false}
                displayAddNewRow={false}
            />

[OvidijusParsiunas]

Hi @rsgilbert. Currently the table does not support rendering custom html elements. We may consider this in the future.

[calin-dobos]

Hello,

I second that. It would maybe be useful for columns to have a custom render function called for each cell, with row & cell as parameters. I can think of several scenarios where this makes sense:

• Links in a table are quite common, as mentioned by @rsgilbert
• In a generic key->value service, for example, you could have data like:
  • "timeout.minutes" -> number with incremenent/decrement.
  • "app.icon" -> base64 image to be previewed on cell hover
  • "support.email" -> mailto:...
• Excel-style "Insert Up"/"Insert Down"/"Move Up"/"Move Down" are very specific operations that might not be needed if you want to use the table for add/edit/delete/sort/filter. Setting isInsertDownAvailable, isInsertUpAvailable, isMoveAvailable to false would leave "Delete" as the only row-based operation. That is better represented by a custom action column with a delete icon button.

[eviltik]

another use case : got /2024/02/01/jklkjsdf.jpg and i want to format the cell so i can transform it into a valid url then display an image. Custom render is needed, like in webix.

+12