How to render dynamic tables in html while exporting it another file

Question

module.exports = (items) => {
return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>
<body>
  <table>
    <tr>
      // dynamic render
    </tr>
  </table>
</body>
</html>`
}

I want to render a dynamic array like items in the //dynamic render section how can I add it there ?

Nitzy · Accepted Answer · 2020-09-02 10:14:34Z

1

You can create the template and then replace whatever dynamic stuff you want to render in it like below

let template = `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sample</title>
    </head>
    <body>
      <table>
        <tr>
         {{dynamicPart}}
        </tr>
      </table>
    </body>
    </html>`;
    
// assuming list is an array ['a', 'b', 'c']
module.exports = (items) => {
    let data = '';
    // creating dynamic data
    for (const item of items) {
        data += `<td>${item}</td>`;
    }
    // replacing placeholder with actual data and returning
    return template.replace('{{dynamicPart}}', data);
}

answered Sep 2, 2020 at 10:14

Nitzy

2781 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dnp_akil Over a year ago

can i replace more than one dynamic part in html ?

Nitzy Over a year ago

yes, just add more placeholders and more replace logic just like mentioned above.

Collectives™ on Stack Overflow

How to render dynamic tables in html while exporting it another file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related