dasDaniel/svelte-table

I'd like to have access to a row value for a renderComponent

Opened this issue · 4 comments

cryptosmithio commented

Maybe I am looking at this the wrong way. I am using a simple 3rd party component, StarRating. The component has a required prop for rating, which is a number from 0-5 and produces stars representing the rating.

I want each row to display ratings this way as so:
screenshot_293

The only way I can think to pass the row value to this component, is to create an intermediary one, which takes the row and calls the component.

<script lang="ts">
	import StarRating from 'svelte-star-rating';
	export let row;
</script>

<StarRating rating={row.rating} />

Then call this intermediary as my renderComponent:

renderComponent: {
component: TableRating
}

This works, but seems like a waste to create a component just to parse the value of the row. Is there a better way to do this?

cryptosmithio commented

That's how I built my example, and it works. But if I could have access to the specific values in the row, then I wouldn't need to build a component which is pulling out the value and sending it to the StarRating component.

I.e, if I can call it directly such as:

renderComponent: {
component: TableRating
props: {  rating : (v: row) => v.rating } } }
}

Or can you see another way I could call the component without creating a new one?

Thanks.

dasDaniel commented

oh, gotcha

No, not possible right now. The props would have to be transformed.

I suppose the feature could be added to pass the result of a function instead of the pre-determined values. But I'm not planning to add at the moment.

If I were to add, it would likely be replacing existing implementation instead of adding, which would cause some breaking changes

cryptosmithio commented

Fair enough. I just wanted to get my wish list in. Thanks for the project, I'm enjoying using it.

  • 👍1