Hi there, guys! First of all, as a person who was digging inside your ww-elements on GitHub for the last 2 weeks - it’s written in a very good way, you guys are amazing 
I was trying to implement DevExtreme Data Grid from npm, it’s far more complex than WeWeb one and allows configuring the grid in runtime (resizing, reordering, or hiding/showing columns, etc). I was able to create cell components and pass them as a cellRenderer dynamically and all the functionality works perfectly, but it consumes too much memory (I haven’t debugged much of the build version, but from first glance, there was no problem with memory consumption). I will attach some of my code and if someone can point me to what am I doing wrong I will be very happy.
My template:
<template>
<DxDataGrid
id="dataGrid"
columnAutoWidth="true"
:data-source="rowData"
:show-borders="content.showBorders"
:row-alternation-enabled="content.rowAlternationEnabled"
:allow-column-reordering="content.allowColumnReordering"
:allow-column-resizing="content.allowColumnResizing"
:columns="content.columns"
:height="content.gridHeight"
:width="content.gridWidth"
:key-expr="content.uniqueField"
@initialized="onGridStart"
@row-click="onRowClicked"
@option-changed="onOptionChanged"
>
<DxScrolling mode="virtual" />
<DxPaging
:enabled="content.internalPagination"
:pageSize="content.pageSize"
/>
<DxStateStoring
:enabled="content.stateStoring"
type="localStorage"
:storage-key="content.uniqueStorageId"
/>
<DxColumnChooser :enabled="content.showColumnChooser" mode="select" />
<template #cellTemplate="{ data }">
<wwLayoutItemContext
is-repeat
:data="data"
:repeated-items="content.data"
:item="data.data"
:index="data.row.rowIndex"
>
<wwElement
v-if="content.columnsElement[data.column.id]"
v-bind="content.columnsElement[data.column.id]"
></wwElement>
</wwLayoutItemContext>
</template>
</DxDataGrid>
</template>
How I’m adding a column & generating a cell:
async addColumn() {
const columns = [...this.content.columns];
const id = wwLib.wwUtils.getUid();
columns.push({
type: "custom",
cellTemplate: "cellTemplate",
id: id,
display: true,
editable: true,
editableType: "custom",
alignment: "left",
dataField: "id",
caption: "Column",
allowHiding: false,
allowSorting: false,
minWidth: "200",
width: "auto",
});
this.$emit("update:content", { columns });
const element = await this.createElement(TYPE_OF_ELEMENTS["custom"], {
_state: { name: `Cell Template` },
});
this.$emit("update:content:effect", {
columnsElement: {
...this.content.columnsElement,
[id]: element,
},
});
},
Column remove:
removeColumn({ index }) {
const columns = [...this.content.columns];
const [col] = columns.splice(index, 1);
let update = { columns };
if (this.content.columnsElement[col.id]) {
const columnsElement = { ...this.content.columnsElement };
delete columnsElement[col.id];
update.columnsElement = columnsElement;
}
this.$emit("update:content", update);
},
},
Content Columns from ww-config.js:
columns: {
label: {
en: "Columns",
},
type: "Array",
hidden: (content) => !hasData(content),
options: {
item: {
type: "Object",
options: {
item: {
caption: {
label: "Caption",
type: "Text",
defaultValue: "Caption",
},
cellTemplate: {
label: "Cell Template",
type: "Text",
defaultValue: "cellTemplate",
hidden: true,
},
width: {
label: "Cell Width (auto is default)",
type: "Text",
defaultValue: "auto",
},
minWidth: {
label: "Minimal Cell Width (px)",
type: "Number",
defaultValue: "200",
},
// dataField: {
// label: { en: "Data Field" },
// type: "ObjectPropertyPath",
// options: (content) => ({
// object: getDataObject(content),
// }),
// },
dataField: {
label: { en: "Data Field" },
type: "Text",
defaultValue: "id",
},
allowHiding: {
label: { en: "Allow Drag&Drop Hiding" },
type: "OnOff",
bindable: true,
defaultValue: false,
/* wwEditor:start */
bindingValidation: {
type: "boolean",
tooltip: "A boolean that defines the display: `true | false`",
},
/* wwEditor:end */
},
allowSorting: {
label: { en: "Allow Sorting" },
type: "OnOff",
bindable: true,
defaultValue: false,
/* wwEditor:start */
bindingValidation: {
type: "boolean",
tooltip: "A boolean that defines the display: `true | false`",
},
/* wwEditor:end */
},
},
},
defaultValue: { label: "Header" },
},
add: "addColumn",
remove: "removeColumn",
// movable: true,
expandable: true,
getItemLabel(item, index) {
return `Column ${index + 1}`;
},
},
defaultValue: [],
section: "settings",
},
I’m passing Column Definitions directly to the grid (when I have a separate variable that I was mapping from content.columns it causes framerate dropping).
*here I have an example of a grid with 20 columns (every cell is unique) and it consumes 1 GB of ram. (while I finished writing this post it’s 1.3 GB already)
Is there a chance that I’m having this problem because of 80 dropzones on the screen (4 rows * 20 columns)? Are there any WeWeb services that are pinging my component? Also, how can I debug the memory consumption of the custom component? How do you guys do that?
Thank you, guys!
