eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 22:04:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Task 3] Format

Browse Source
This commit is contained in:
Janis Hutz
2025-11-16 19:25:55 +01:00
parent 5fa2b1f618
commit 13cc143888
10 changed files with 381 additions and 6712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
task_3_react/src/client/components/DataTable.tsx
View File

@@ -1,37 +1,53 @@
import { Key, SetStateAction, useState } from "react";
import { CSV_Data } from "../types";
import {
Key, SetStateAction, useState
} from 'react';
import {
CSV_Data
} from '../types';
const DataTable = (props: {data: CSV_Data}) => {
if (props.data.length == 0) return <></>;
const DataTable = ( props: {
'data': CSV_Data
} ) => {
if ( props.data.length == 0 ) return <></>;
const header = Object.keys(props.data[0]!);
const [sortCol, setSortCol] = useState("None");
const [sortType, setSortType] = useState("asc");
const header = Object.keys( props.data[0]! );
const [
sortCol,
setSortCol
] = useState( 'None' );
const [
sortType,
setSortType
] = useState( 'asc' );
const sortingHandler = (col: String) => {
if (sortCol !== col) {
setSortCol(col as SetStateAction<string>);
setSortType("asc");
} else if (sortType === "asc") {
setSortType("desc");
const sortingHandler = ( col: string ) => {
if ( sortCol !== col ) {
setSortCol( col as SetStateAction<string> );
setSortType( 'asc' );
} else if ( sortType === 'asc' ) {
setSortType( 'desc' );
} else {
setSortCol("None");
setSortType("None");
setSortCol( 'None' );
setSortType( 'None' );
}
}
};
if ( sortCol !== 'None' && sortType === 'asc' ) {
props.data.sort( ( a, b ) => {
if ( a[sortCol]! < b[sortCol]! ) return -1;
if ( a[sortCol]! > b[sortCol]! ) return 1;
if (sortCol !== "None" && sortType === "asc") {
props.data.sort( (a, b) => {
if (a[sortCol]! < b[sortCol]!) return -1;
if (a[sortCol]! > b[sortCol]!) return 1;
return 0;
});
} else if (sortCol !== "None" && sortType === "desc") {
props.data.sort( (a, b) => {
if (a[sortCol]! > b[sortCol]!) return -1;
if (a[sortCol]! < b[sortCol]!) return 1;
} );
} else if ( sortCol !== 'None' && sortType === 'desc' ) {
props.data.sort( ( a, b ) => {
if ( a[sortCol]! > b[sortCol]! ) return -1;
if ( a[sortCol]! < b[sortCol]! ) return 1;
return 0;
});
} );
}
return (
@@ -43,49 +59,61 @@ const DataTable = (props: {data: CSV_Data}) => {
<table id="table-content">
<thead>
<tr>
{
header.map( (col) => (
<ColHeader col={col} sortingHandle={sortingHandler} isSelected={col == sortCol} sortType={sortType}></ColHeader>
))
}
{
header.map( col => <ColHeader
col={col}
sortingHandle={sortingHandler}
isSelected={col == sortCol}
sortType={sortType}></ColHeader> )
}
</tr>
</thead>
<tbody>
{
props.data.map( (row, i) => (
props.data.map( ( row, i ) => (
<tr key={i}>
{
header.map( (col) => (
<Row key={i} col={col} content={row[col] as String}></Row>
))
header.map( col => <Row key={i} col={col} content={row[col] as string}></Row> )
}
</tr>
))
) )
}
</tbody>
</table>
</div>
</article>
)
}
);
};
const ColHeader = (props: {col: String, sortingHandle: (s: String) => void, isSelected: boolean, sortType: String}) => {
const ColHeader = ( props: {
'col': string,
'sortingHandle': ( s: string ) => void,
'isSelected': boolean,
'sortType': string
} ) => {
return (
<th
<th
className={
props.isSelected
? (props.sortType === "asc" ? "active sorting asc" : "active sorting desc")
: "sortable"
}
onClick={() => {props.sortingHandle!(props.col)}}
props.isSelected
? ( props.sortType === 'asc' ? 'active sorting asc' : 'active sorting desc' )
: 'sortable'
}
onClick={() => {
props.sortingHandle!( props.col );
}}
key={props.col as Key}>
{props.col}
</th>
);
}
};
const Row = (props: {col: String, content: String, key: Key}) => {
const Row = ( props: {
'col': string,
'content': string,
'key': Key
} ) => {
return <td key={props.col as Key}>{props.content}</td>;
}
};
export default DataTable;
export default DataTable;