Javatpoint Logo
Javatpoint Logo

How to create a dynamic table in JavaScript

A dynamic table is one whose number of rows varies based on the input it receives during runtime. Some websites or online programs, such as business websites, require the dynamic creation of a table while adding data or information. It can be done because JavaScript is a programming language that uses dynamic type.

To create a dynamic table in JavaScript, you can follow these steps:

1. Create an HTML element where you want to display the table. For example, create a div element with an id attribute to reference it in your JavaScript code:

2. In your JavaScript code, define an array of data that you want to display in the table. For example:

3. Create a function that generates the table HTML markup based on the data array. For example:

4. Call the generateTable function with the data array and append the resulting HTML markup to the table container element. For example:

5. Optionally, you can style the table using CSS to make it look more visually appealing. For example:

That's it! You now have a dynamic table that can be updated with new data as needed.


Here's another example that generates a dynamic table using user input.


How to create a dynamic table in JavaScript


This code generates an input form where the user can specify the number of rows and columns they want in the table. When the user clicks the "Generate Table" button, the generateTable() function is called. This function retrieves the user input values, generates an HTML table with the specified number of rows and columns, and inserts the table into the table-container element.

Note that:- This example does not use an array of data like the previous example, but instead generates the table content dynamically using loops. You can modify the loop logic to generate different table content as needed.


Here's another example that generates a dynamic table using data from an external API.


Name Email Phone
Leanne Graham [email protected] 1-770-736-8031 x56442
Ervin Howell [email protected] 010-692-6593 x09125
Clementine Bauch [email protected] 1-463-123-4447
Patricia Lebsack [email protected] 493-170-9623 x156
Chelsey Dietrich [email protected] (254)954-1289
Mrs. Dennis Schulist [email protected] 1-477-935-8478 x6430
Kurtis Weissnat [email protected] 210.067.6132
Nicholas Runolfsdottir V [email protected] 586.493.6943 x140
Glenna Reichert [email protected] (775)976-6794 x41206
Clementina DuBuque [email protected] 024-648-3804


This code uses the fetch() method to retrieve data from an external API ( The API returns an array of user objects, which are used to generate an HTML table with three columns (Name, Email, and Phone). The async/await syntax is used to handle the asynchronous nature of the fetch() method.

Note that:- In this example, the generateTable() function is called automatically when the page loads, so the table is generated without the need for user input. You can modify the API endpoint to retrieve different data, and the table columns and content will update accordingly.

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA