Skip to content

Commit c227c44

Browse files
citizen-drorcitizen-dror
committed
style accident table
1 parent a9889b1 commit c227c44

File tree

5 files changed

+128
-70
lines changed

5 files changed

+128
-70
lines changed

‎src/components/detailsTable/AccidentDetailsCard.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import {
3+
Table,
4+
flexRender,
5+
} from '@tanstack/react-table';
6+
import { Table as TableBootstrap, Card } from "react-bootstrap";
7+
import './detailesTable.css';
8+
9+
interface AccidentDetailsCardProps {
10+
table: Table<any>;
11+
}
12+
13+
const AccidentDetailsCard: React.FC<AccidentDetailsCardProps> = ({ table }) => (
14+
<div className="card-layout p-2">
15+
{table.getRowModel().rows.map(row => (
16+
<Card key={row.id} className="mb-2 p-2 shadow-sm border">
17+
{row.getVisibleCells().map(cell => (
18+
<div key={cell.id} className="mb-1">
19+
<strong>{cell.column.columnDef.header as string}:</strong>{' '}
20+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
21+
</div>
22+
))}
23+
</Card>
24+
))}
25+
</div>
26+
);
27+
export default AccidentDetailsCard;

‎src/components/detailsTable/AccidentsTable.tsx‎

Lines changed: 13 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ import { selectDataAllInjuries } from "../../stores/casualty/casualtySlice";
2121
import AccidentColumns from './AccidentColumns';
2222
import PaginationControls from './PaginationControls';
2323
import './detailesTable.css';
24+
import TableView from './TableView';
25+
import AccidentDetailsCard from './AccidentDetailsCard';
2426

2527
interface IProps { }
2628

2729
const AccidentsTable: React.FC<IProps> = () => {
2830
const { t } = useTranslation();
31+
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 600);
2932
const dataAllInjuries = useSelector(selectDataAllInjuries) as Accident[];
3033

3134
const [data, setData] = React.useState(() => [...dataAllInjuries]);
@@ -37,27 +40,15 @@ const AccidentsTable: React.FC<IProps> = () => {
3740
setData([...dataAllInjuries]);
3841
}, [dataAllInjuries]);
3942

40-
const allColumnsDef = React.useMemo(() => AccidentColumns(t), [t]);
41-
42-
// Function to handle dynamic column layout based on window width
43-
const getColumnsByWidth = (width: number, columns: ColumnDef<Accident>[]) => {
44-
// Adjust logic based on width to modify columns visibility or configuration
45-
if (width < 600) {
46-
// Example: return a smaller subset of columns for small screens
47-
return columns.slice(0, 4); // Adjust based on your logic
48-
}
49-
return columns; // Default to all columns for larger screens
50-
};
51-
52-
const [columns, setColumns] = useState(() => getColumnsByWidth(window.innerWidth, allColumnsDef));
5343
useEffect(() => {
5444
const handleResize = () => {
55-
setColumns(getColumnsByWidth(window.innerWidth, allColumnsDef));
45+
setIsSmallScreen(window.innerWidth < 600);
5646
};
5747
window.addEventListener('resize', handleResize);
5848
return () => window.removeEventListener('resize', handleResize);
5949
}, []);
6050

51+
const columns = React.useMemo(() => AccidentColumns(t), [t]);
6152
const table = useReactTable({
6253
columns,
6354
data,
@@ -79,51 +70,15 @@ const AccidentsTable: React.FC<IProps> = () => {
7970

8071
return (
8172
<Card className="m-1 p-0 border-0">
82-
<TableBootstrap striped bordered hover className="table-container">
83-
<thead>
84-
{table.getHeaderGroups().map(headerGroup => (
85-
<tr key={headerGroup.id}>
86-
{headerGroup.headers.map(header => (
87-
<th key={header.id} colSpan={header.colSpan}>
88-
<div
89-
{...{
90-
className: header.column.getCanSort()
91-
? 'cursor-pointer select-none'
92-
: '',
93-
onClick: header.column.getToggleSortingHandler(),
94-
}}
95-
>
96-
{flexRender(header.column.columnDef.header, header.getContext())}
97-
{{
98-
asc: ' 🔼',
99-
desc: ' 🔽',
100-
}[header.column.getIsSorted() as string] ?? null}
101-
{header.column.getCanFilter() ? (
102-
<div className="d-flex align-items-center gap-1 filter-container">
103-
<DetailsTableFilter column={header.column} table={table} />
104-
</div>
105-
) : null}
106-
</div>
107-
</th>
108-
))}
109-
</tr>
110-
))}
111-
</thead>
112-
<tbody className="table-body">
113-
{table.getRowModel().rows.map(row => (
114-
<tr key={row.id}>
115-
{row.getVisibleCells().map(cell => (
116-
<td key={cell.id}>
117-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
118-
</td>
119-
))}
120-
</tr>
121-
))}
122-
</tbody>
123-
</TableBootstrap>
124-
73+
<Card.Body>
74+
{isSmallScreen ? (
75+
<AccidentDetailsCard table={table} />
76+
) : (
77+
<TableView table={table} />
78+
)}
79+
</Card.Body>
12580
<Card.Footer className="bg-white p-2">
126-
<div className="d-flex flex-wrap align-items-center gap-2">
81+
<div className="d-flex flex-wrap align-items-center gap-2">
12782
<PaginationControls table={table} />
12883
<Button onClick={onExportClick} className="export-btn">
12984
{t('export-to-csv')}

‎src/components/detailsTable/TableView.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import {
3+
Table,
4+
flexRender,
5+
} from '@tanstack/react-table';
6+
import { Table as TableBootstrap } from "react-bootstrap";
7+
import DetailsTableFilter from './DetailsTableFilter';
8+
import './detailesTable.css';
9+
10+
interface TableViewProps {
11+
table: Table<any>;
12+
}
13+
14+
const TableView: React.FC<TableViewProps> = ({ table }) => (
15+
<div className="table-responsive-wrapper">
16+
<TableBootstrap striped bordered hover className="table-container">
17+
<thead>
18+
{table.getHeaderGroups().map(headerGroup => (
19+
<tr key={headerGroup.id}>
20+
{headerGroup.headers.map(header => (
21+
<th key={header.id} colSpan={header.colSpan}>
22+
<div
23+
className={
24+
header.column.getCanSort() ? 'cursor-pointer select-none' : ''
25+
}
26+
onClick={header.column.getToggleSortingHandler()}
27+
>
28+
{flexRender(header.column.columnDef.header, header.getContext())}
29+
{{
30+
asc: ' 🔼',
31+
desc: ' 🔽',
32+
}[header.column.getIsSorted() as string] ?? null}
33+
{header.column.getCanFilter() && (
34+
<div className="d-flex align-items-center gap-1 filter-container">
35+
<DetailsTableFilter column={header.column} table={table} />
36+
</div>
37+
)}
38+
</div>
39+
</th>
40+
))}
41+
</tr>
42+
))}
43+
</thead>
44+
<tbody className="table-body">
45+
{table.getRowModel().rows.map(row => (
46+
<tr key={row.id}>
47+
{row.getVisibleCells().map(cell => (
48+
<td key={cell.id}>
49+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
50+
</td>
51+
))}
52+
</tr>
53+
))}
54+
</tbody>
55+
</TableBootstrap>
56+
</div>
57+
);
58+
export default TableView;

‎src/components/detailsTable/detailesTable.css‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
1+
.card-layout .card {
2+
border-radius: 0.5rem;
3+
background: #fff;
4+
border: 1px solid #ccc;
5+
font-size: 14px;
6+
line-height: 1.4;
7+
padding: 0.75rem;
8+
}
9+
.card-layout .card div {
10+
margin-bottom: 0.25rem;
11+
}
112

13+
.table-responsive-wrapper {
14+
overflow-x: auto;
15+
width: 100%;
16+
font-size: 14px;
17+
}
18+
.card-layout .card strong {
19+
font-weight: 500;
20+
color: #555;
21+
}
22+
.filter-input {
23+
min-width: 70px;
24+
max-width: 150px;
25+
width: 60%;
26+
}
227

3-
4-
.filter-input {
5-
min-width: 80px;
6-
max-width: 150px;
7-
width: 70%;
8-
}
9-
10-
.filter-input-number {
11-
min-width: 20px;
12-
max-width: 70px;
13-
}
28+
.filter-input-number {
29+
min-width: 20px;
30+
max-width: 70px;
31+
}

‎src/stores/store.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const initializeStore = createAsyncThunk(
1111
// Load language
1212
await dispatch(initLang());
1313
// Get CBS data date
14-
await dispatch(fetchLatestCbsUpdate());
14+
// await dispatch(fetchLatestCbsUpdate());
1515
}
1616
);
1717

0 commit comments

Comments
 (0)