KtDataTable column name is not working as expected in version 8.1.1
Hello,
I upgraded the version with 8.1.1 The issue is in KtDataTable. I created the header array like below.
const tableHeader = ref([
{
columnName: "#Sr",
columnLabel: "index",
sortEnabled: true,
columnWidth: 20,
},
{
columnName: "Customer Name",
columnLabel: "first_name",
sortEnabled: true,
columnWidth: 230,
},
]);If I want to give my column name different it's not possible because for table heading
KtDataTable component using columnLabel.When I checked the below file, there you'r using
columnLabel instead of columnNamefrontend/src/components/kt-datatable/table-partials/table-content/table-head/TableHeadRow.vue
<template v-for="(column, i) in header" :key="i">
<th
:class="{
'text-end': i === header.length - 1,
}"
@click="onSort(column.columnLabel, column.sortEnabled)"
:style="{
minWidth: column.columnWidth ? `${column.columnWidth}px` : '0',
width: 'auto',
cursor: column.sortEnabled ? 'pointer' : 'auto',
}"
>
{{ column.columnLabel }}
<span
v-if="
columnLabelAndOrder.label === column.columnLabel &&
column.sortEnabled
"
v-html="sortArrow"
></span>
</th>
</template>
columnName, and columnLabel(Actually using for a key for template) both keys are confusing please look at this issue.
Replies (9)
Hi,
Thank you for your feedback.
It is mistaken, you can change {{ column.columnLabel }} to {{ column.columnName }} in file src/components/kt-datatable/table-partials/table-content/table-head/TableHeadRow.vue, we will include fix to next releease Metronic release.
One more issue I am facing is. if I want to add row index to my table what I to do is there any provision for that?
You can add row index in the same way as other columns, just a add new id column configuration object.
{
columnName: "Id",
columnLabel: "id",
sortEnabled: true,
columnWidth: 20,
},Hi, the above one is not working, it added my id value which comes from the API. I want to use a custom index for each row.
<template v-slot:>
{{ data.id }} //This is trhe id which I get from the API
</template>{
columnName: "Id",
columnLabel: "id",
sortEnabled: true,
columnWidth: 20,
},If I will not write my template code it's showing warning in console and also it shows blank in the ID column
You need to specify the template differently using your id slot.
Instead of v-slot: use v-slot:id ="{ row: customer }".
In the case you mentioned above it's working fine, like it's print the id of my object key.
For example - Element Ui table provide the
type="index"Here I attached the element UI table link for the same
<a>https://element-plus.org/en-US/component/table.html#custom-index</a>
Hi,
Unfortunately, this is not handled by our component at the moment. We will consider including this in upcoming releases.
Is this any customization so I can implement in the KTdatatable component. It would be great if you provide me with the solution for that.
Because in every module I am using the KTDataTable and I need to be show that index
Hi,
You can add new cell in file src/components/kt-datatable/table-partials/table-content/table-body/TableBodyRow.vue.
Before the data display array place a new cell code.
<td>
{{ i }}
</td>
