Comparator table in html/js

user_12656577 0
Viewed 51

I'm new at html/javascript and I want to know what is the best way to make a table like this, it's like a comparator, when I select the model in the combobox the table will fill with the data that match with the model choosen I can only use html/javascript/react

comparator table

thank you

reactjs html javascript
2 Answers

This is a crud example on how that dropdown could work https://codesandbox.io/s/stoic-tdd-bqiq1?file=/src/App.js .

There's a lot of improvements that could be made with this example but this is a functional basis.

I can provide further explanations if there's something unclear with the example.

user_133050730

You can have a file to describe your model:

function makeCar(carType, price, fuel){
    if(carType.toLower() != 'audi' || carType != 'bmw')
        carType = 'Audi' //default
    return {
        carType, price, fuel
    };
}

And two components:

  • One to render a car column that use the previous model.
  • One to render the entire table.

Here is a documentation to write the html of table: https://www.w3schools.com/html/html_tables.asp

Here is a documentation to write react component: https://reactjs.org/docs/react-component.html

user_103065730
Related