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 columnName
frontend/src/components/kt-datatable/table-partials/table-content/table-head/TableHeadRow.vue


{{ column.columnLabel }}



columnName, and columnLabel(Actually using for a key for template) both keys are confusing please look at this issue.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

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"
, which prints the index of row. Do we have any provision for the same. Can you please provide the sandbox link.

Here I attached the element UI table link for the same
https://element-plus.org/en-US/component/table.html#custom-index

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>

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(