search

uwla / vue-data-table

Vue data table plugin
https://uwla.github.io/vue-data-table/demo
130 stars 23 forks source link

Custom Component #99

Closed Siddhesh220398 closed 7 months ago

Siddhesh220398 commented 7 months ago

When Custom Componet is Add i.e. Footer Component but ican't display. As per your code add but not reflect

`

`

uwla commented 7 months ago

Hi. I believe this may be an issue with how Vue3 handles dynamic components with <component :is=dynamicComponent />.

I faced this issue and the best way to solve it, without getting a lot of warnings from Vue, is to register the component globally and pass the component name as string:

import App from './App'
import { StatusBadge } from './components'
const app = createApp(App);
app.component('status-badge', StatusBadge);

// later on
columns = [
  /**/
  { title: 'Project Status', component: 'status-badge' }
]

By the way, you do not need to pass key if you are using a custom component. The key is ignored. Also, by default, columns that use custom components are not sortable unless a user-provided sorting function is passed.