sorting list creation draft done

site/src/components/Sorting.jsx

@@ -0,0 +1,73 @@
+import { useState } from "react";
+
+const SortLevel = (props) => {
+    return (
+        <>
+            <select id={"select_" + props.id} onChange={props.updateCallback} value={props.selected}>
+                <option key="-1" value="0">--do not sort--</option>
+                {
+                    props.keys.map((key, i) => <option key={i} value={i + 1}>{key}</option>)
+                }
+            </select>
+            <input type="checkbox" id={"reverse_" + props.id} />reversed?
+            <br />
+        </>
+    )
+}
+
+
+const Sorting = (props) => {
+    const [selections, updateSelections] = useState([-1]);
+    const updateOption = (x, id) => {
+
+        selections[id] = x;
+
+        let unusedOptions = [...selections];
+        let selectionsUpdate = selections.map((x, i, arr) => {
+            if (i < id) {
+                unusedOptions.filter((v) => v != x);
+                return x;
+            }
+
+            if (x != -1 && arr.indexOf(x) != i) {
+                return unusedOptions[0];
+            }
+            return x
+        })
+
+        selectionsUpdate = selectionsUpdate.filter((x, i) => x != -1);
+
+        if (selectionsUpdate.length == 0 || selectionsUpdate[selectionsUpdate.length - 1] != -1) {
+            selectionsUpdate.push(-1)
+        }
+        console.log(selectionsUpdate)
+        updateSelections(selectionsUpdate);
+
+
+    }
+    const array = props.array;
+    const keys = props.keys;
+
+
+
+
+    return (
+        <>
+            {
+                selections.map((x, i, arr) => {
+                    let curenSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
+                    const upadteOptionWrap = (event) => {
+                        console.log(event)
+                        updateOption(Number(event.target.value) - 1, i)
+                    };
+
+                    return <SortLevel key={i} id="SortLevel0" keys={curenSelectiontArr} updateCallback={upadteOptionWrap} selected={x + 1} />
+                })
+
+            }
+        </>
+    )
+}
+
+
+export default Sorting;

site/src/components/Table.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import TableHead from './TableHead.jsx';
 import TableBody from './TableBody.jsx';
 import Filter from './Filter.jsx';
+import Sorting from './Sorting.jsx';
 
 /*
    компонент, выводящий на страницу таблицу с пагинацией
@@ -27,7 +28,7 @@ const Table = (props) => {
 
     //формируем совокупность span с номерами страниц
     const pages = arr.map((item, index) =>
-        <span className={index == (activePage - 1) ? "selected" : ""} key={index} onClick={changeActive}> {item} </span>
+        <span key={index} className={index == (activePage - 1) ? "selected" : ""} onClick={changeActive}> {item} </span>
     );
 
     return (
@@ -35,6 +36,10 @@ const Table = (props) => {
             <h4>Filters</h4>
             <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />
 
+
+            <h4>Sort by</h4>
+            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])}/>
+
             <table>
                 <TableHead head={Object.keys(props.data[0])} />
                 <TableBody body={dataTable} amountRows={props.amountRows} numPage={activePage} />

site/src/components/TableRow.jsx

@@ -12,7 +12,7 @@ const TableRow = (props) => {
         : props.row.map((item, index) => <th key={ index }> {item} </th>);
  
     return(
-        <> {cells} </>
+        <>{cells}</>
     )
 }