made it work for ram sticks data

site/src/App.jsx

@@ -1,14 +1,12 @@
 import { useState } from 'react'
 import Table from './components/Table.jsx';
-import buildings from './data.js';
+import ram_sticks from './data.js';
 import './CSS/App.css'
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <div className="App">
        <h3>Самые высокие здания и сооружения</h3>
-        <Table data={ buildings } amountRows="15" />
+        <Table data={ ram_sticks } amountRows="15" />
     </div>
   )
 }

site/src/components/Filter.jsx

@@ -11,23 +11,25 @@ const Filter = (props) => {
     const handleSubmit = (event) => {
         event.preventDefault();
 
+        const readNumConstrain = (name, event) => [event.target[name + "From"].value == "" ? null : Number(event.target[name + "From"].value), event.target[name + "To"].value == "" ? null : Number(event.target[name + "To"].value)]
+
         // создаем словарь со значениями полей формы
         const filterField = {
-            "Название": event.target["structure"].value.toLowerCase(),
-            "Тип": event.target["type"].value.toLowerCase(),
-            "Страна": event.target["country"].value.toLowerCase(),
-            "Город": event.target["city"].value.toLowerCase(),
-            "Год":[event.target["yearFrom"].value==""?null:Number(event.target["yearFrom"].value),event.target["yearTo"].value==""?null:Number(event.target["yearTo"].value)],
-            "Высота":[event.target["heightFrom"].value==""?null:Number(event.target["heightFrom"].value),event.target["heightTo"].value==""?null:Number(event.target["heightTo"].value)]
+            "type": event.target["type"].value.toLowerCase(),
+            "name": event.target["name"].value.toLowerCase(),
+            "size": readNumConstrain("size", event),
+            "maker": event.target["maker"].value.toLowerCase(),
+            "release": readNumConstrain("release", event),
+            "price": readNumConstrain("price", event)
         };
 
         //фильтруем данные по значениям всех полей формы
         let arr = props.fullData;
         for (const key in filterField) {
             arr = arr.filter(item =>
-                typeof(filterField[key])=="object"?
-            (filterField[key][0]==null? true:item[key]>=filterField[key][0] )&&(filterField[key][1]==null? true:item[key]<=filterField[key][1] ) :
-                item[key].toLowerCase().includes(filterField[key])
+                typeof (filterField[key]) == "object" ?
+                    (filterField[key][0] == null ? true : item[key] >= filterField[key][0]) && (filterField[key][1] == null ? true : item[key] <= filterField[key][1]) :
+                    item[key].toLowerCase().includes(filterField[key])
             )
         }
 
@@ -37,40 +39,42 @@ const Filter = (props) => {
     return (
         <form onSubmit={handleSubmit} onReset={handleSubmit}>
             <p>
-                <label>Название:</label>
-                <input name="structure" type="text" />
-            </p>
-            <p>
-                <label>Тип:</label>
+                <label>Type:</label>
                 <input name="type" type="text" />
             </p>
             <p>
-                <label>Страна:</label>
-                <input name="country" type="text" />
+                <label>Name:</label>
+                <input name="name" type="text" />
             </p>
             <p>
-                <label>Город:</label>
-                <input name="city" type="text" />
+                <label>Size from (gb):</label>
+                <input name="sizeFrom" type="numer" />
+                <label>to:</label>
+                <input name="sizeTo" type="numer" />
             </p>
-             <p>
-                <label>Год от:</label>
-                <input name="yearFrom" type="number" />
-                <label>до:</label>
-                <input name="yearTo" type="number" />
+            <p>
+                <label>Maker:</label>
+                <input name="maker" type="text" />
             </p>
-             <p>
-                <label>Высота от:</label>
-                <input name="heightFrom" type="number" />
-                <label>до:</label>
-                <input name="heightTo" type="number" />
+            <p>
+                <label>Release year from:</label>
+                <input name="releaseFrom" type="number" />
+                <label>to:</label>
+                <input name="releaseTo" type="number" />
             </p>
-            
+            <p>
+                <label>Price from:</label>
+                <input name="priceFrom" type="number" />
+                <label>Price to:</label>
+                <input name="priceTo" type="number" />
+            </p>
+
             <p>
                 <button type="submit">Фильтровать</button>
                 <button type="reset">Очистить фильтр</button>
             </p>
         </form>
-            )
+    )
 }
 
-            export default Filter;
+export default Filter;

site/src/components/Table.jsx

@@ -32,7 +32,7 @@ const Table = (props) => {
 
     return (
         <>
-            <h4>Фильтры</h4>
+            <h4>Filters</h4>
             <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />
 
             <table>

site/src/data.js

@@ -1,5 +1,5 @@
 
-const ram_sticks = [
+let ram_sticks = [
     { "type": "DDR3", "name": "DDR3-1600-4GB-A1", "size": 4, "maker": "Kingston", "release": "2014-03", "price": 18, },
     { "type": "DDR3", "name": "DDR3-1600-8GB-A2", "size": 8, "maker": "Corsair", "release": "2015-06", "price": 26, },
     { "type": "DDR3", "name": "DDR3-1866-8GB-A3", "size": 8, "maker": "G.Skill", "release": "2016-02", "price": 29, },