What is the best way to create an HTML table data

I need to show an html table from Strapi what is the best way to lay this out in strapi as I need it to be a scaleable component that can have multiple headers and multiple rows?

currently I have a hard coded version that works in nextjs. This is my hard coded json that i am looping through which works. i just dont know how to lay this out in strapi so its easy for non developers.

It almost needs to be a repeatable component inside a repeatable component. but this does not seem to be possible

const columnData = [
{
col: [“2021”, “15.2”, “16.8”],
colBgCol: “bg-white”,
},
{
col: [“2020”, “3.5”, “4.0”],
colBgCol: “bg-white”,
},
{
col: [“2019”, “8.3”, “9.5”],
colBgCol: “bg-white”,
},
{
col: [“2018”, “10.4”, “11.5”],
colBgCol: “bg-white”,
},
{
col: [“2017”, “9.4”, “10.3”],
colBgCol: “bg-white”,
},
{
col: [“2016”, “5.8”, “6.3”],
colBgCol: “bg-white”,
},
{
col: [“2015”, “6.3”, “7.2”],
colBgCol: “bg-white”,
},
{
col: [“2014”, “11.5”, “12.6”],
colBgCol: “bg-white”,
},
{
col: [“2013”, “14.2”, “15.6”],
colBgCol: “bg-white”,
},
{
col: [“2012”, “2.2”, “2.4”],
colBgCol: “bg-white”,
},
{
col: [“5-year compound average p.a.”, “9.3”, “10.3”],
colBgCol: “bg-red”,
},
{
col: [“10-year compound average p.a.”, “8.6”, “9.5”],
colBgCol: “bg-red”,
},
];

Did you find a solution to this?

Install the CKEditor plugin from the marketplace. There you can add html tables and then style it in the frontend the way you want it.

Try using Rich Text Markdown field while creating a content-type. You can easily create tables in markdown.