feat(ui): replaces n-table with XNDataTable for recipe options (fixes #334)

[cnwangjie]

Hi, @jplacht

I often choose the most cost-effective recipe here. Other tables can be sorted, but only this one cannot be sorted, which puzzles me. So I tried to make some changes to achieve that.

I refer to your implementation elsewhere and use XNDataTable to replace original n-table.

after	before

It mostly works well. Except the green active mark. Because I cannot pass class to table cell.
Although DataTable has a cellProps on DataTableColumn, the XNDataTable as a wrapper doesn't pass all props.

We can pass columns props directly to solve this. But perhaps we can simply change the style to bypass it. I'd like to hear from you.

[netlify]

✅ Deploy Preview for prunplanner-preview ready!

Name	Link
🔨 Latest commit	8eed176
🔍 Latest deploy log	https://app.netlify.com/projects/prunplanner-preview/deploys/697b7cc14d7855000858fb27
😎 Deploy Preview	https://deploy-preview-335--prunplanner-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jplacht]

@cnwangjie Thank you, great idea to replace this. We should definitely have some sort of indicator for the active cell. Columns prop would be fine for me, essentially the current border indicator is just the "easiest way" in a normal table, if you have another indicator idea - totally fine, feel free to play around!

[cnwangjie]

@cnwangjie Thank you, great idea to replace this. We should definitely have some sort of indicator for the active cell. Columns prop would be fine for me, essentially the current border indicator is just the "easiest way" in a normal table, if you have another indicator idea - totally fine, feel free to play around!

@jplacht I'm glad to hear you. I just add a green dot to indicate the active status.

[jplacht]

LGTM