Skip to content

Commit c0b8513

Browse files
annelhoteannelhote
committed
temp(fundings): Try to style the datatable
1 parent 5816420 commit c0b8513

2 files changed

Lines changed: 167 additions & 96 deletions

File tree

‎client/src/boards/financements-par-aap/pages/structures/components/projects-data/datatable.tsx‎

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -61,69 +61,77 @@ export default function DataTable({ aggregations, columns, dataTable, filters, n
6161

6262
return (
6363
<>
64-
<table className="fundings-datatable">
65-
<thead>
66-
<tr>
67-
{columns.map((column) => {
68-
return (
69-
<th key={column.id}>
70-
{column.isPlaceholder ? null : (
71-
<>
72-
<div>
73-
{column?.label ?? column.id}
74-
{' '}
75-
{column?.isFilterable && <i className="ri-filter-line" />}
76-
{' '}
77-
{getSortableIcon(column)}
78-
</div>
79-
{column?.isFilterable && (
80-
column?.isFilterableBySelect && aggregations?.[column.id] ? (
81-
<select
82-
className="fr-mb-1w fr-select"
83-
id={`fundings-structure-data-${column.id}`}
84-
name={`fundings-structure-data-${column.id}`}
85-
onChange={(event) => handleFilter(column, event)}
86-
value={inputs[column.id]}
87-
>
88-
<option key='all' value=''>
89-
Tout
90-
</option>
91-
{(aggregations?.[column.id]?.buckets ?? []).map((bucket) => (
92-
<option key={bucket.key} value={bucket.key}>
93-
{bucket.key} ({bucket.doc_count})
94-
</option>
95-
))}
96-
</select>
97-
) : (
98-
<div>
99-
<input
100-
className="border"
101-
onChange={(event) => handleFilter(column, event)}
102-
type="text"
103-
value={inputs[column.id]}
104-
/>
105-
</div>
106-
)
107-
)}
108-
</>
109-
)}
110-
</th>
111-
)
112-
})}
113-
</tr>
114-
</thead>
115-
<tbody>
116-
{dataTable.map((row) => (
117-
<tr key={row.uniqId}>
118-
{columns.map((column) => (
119-
<td key={`${column.id}-${row.id}`}>
120-
{column.getCellValue ? column.getCellValue(row) : row?.[column?.id]}
121-
</td>
122-
))}
123-
</tr>
124-
))}
125-
</tbody>
126-
</table>
64+
<div className="fr-table fr-table--sm fr-table--multiline fundings-datatable">
65+
<div className="fr-table__wrapper">
66+
<div className="fr-table__container">
67+
<div className="fr-table__content">
68+
<table>
69+
<thead>
70+
<tr className="test0">
71+
{columns.map((column) => {
72+
return (
73+
<th className="test1" key={column.id} scope="col">
74+
{column.isPlaceholder ? null : (
75+
<>
76+
<span className="test2 first">
77+
{column?.label ?? column.id}
78+
{' '}
79+
{column?.isFilterable && <i className="ri-filter-line" />}
80+
{' '}
81+
{getSortableIcon(column)}
82+
</span>
83+
<div className="test2 second">
84+
{column?.isFilterable && (
85+
column?.isFilterableBySelect && aggregations?.[column.id] ? (
86+
<select
87+
className="fr-select"
88+
id={`fundings-structure-data-${column.id}`}
89+
name={`fundings-structure-data-${column.id}`}
90+
onChange={(event) => handleFilter(column, event)}
91+
value={inputs[column.id]}
92+
>
93+
<option key='all' value=''>
94+
Tout
95+
</option>
96+
{(aggregations?.[column.id]?.buckets ?? []).map((bucket) => (
97+
<option key={bucket.key} value={bucket.key}>
98+
{bucket.key} ({bucket.doc_count})
99+
</option>
100+
))}
101+
</select>
102+
) : (
103+
<input
104+
className="border"
105+
onChange={(event) => handleFilter(column, event)}
106+
type="text"
107+
value={inputs[column.id]}
108+
/>
109+
)
110+
)}
111+
</div>
112+
</>
113+
)}
114+
</th>
115+
)
116+
})}
117+
</tr>
118+
</thead>
119+
<tbody>
120+
{dataTable.map((row) => (
121+
<tr key={row.uniqId}>
122+
{columns.map((column) => (
123+
<td key={`${column.id}-${row.id}`}>
124+
{column.getCellValue ? column.getCellValue(row) : row?.[column?.id]}
125+
</td>
126+
))}
127+
</tr>
128+
))}
129+
</tbody>
130+
</table>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
127135
<Row className="fr-mt-1w">
128136
<Col>
129137
<select

‎client/src/boards/financements-par-aap/pages/structures/components/projects-data/style.scss‎

Lines changed: 96 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,110 @@
1-
.button-action:hover {
2-
background-color: var(--background-contrast-grey-hover);
3-
border-radius: 5px;
4-
}
1+
// .button-action:hover {
2+
// background-color: var(--background-contrast-grey-hover);
3+
// border-radius: 5px;
4+
// }
55

6-
.button-action:disabled,
7-
.button-action[disabled] {
8-
background-color: transparent;
9-
}
6+
// .button-action:disabled,
7+
// .button-action[disabled] {
8+
// background-color: transparent;
9+
// }
1010

11-
input.border {
12-
border: 1px solid white;
13-
}
11+
// input.border {
12+
// border: 1px solid white;
13+
// }
1414

15-
.fundings-datatable {
16-
border-spacing: 0;
17-
font-size: 12px;
18-
width: 100%;
15+
// .fundings-datatable {
16+
// border-spacing: 0;
17+
// font-size: 12px;
18+
// width: 100%;
1919

20-
input, select {
21-
font-size: 12px;
22-
line-height: 12px;
23-
}
20+
// input, select {
21+
// font-size: 12px;
22+
// line-height: 12px;
23+
// }
2424

25-
thead tr {
26-
background-color: var(--background-alt-grey);
27-
text-align: left;
28-
}
25+
// thead tr {
26+
// background-color: var(--background-alt-grey);
27+
// text-align: left;
28+
29+
// th {
30+
// div:nth-child(1) {
31+
// height: 50px;
32+
// }
33+
// }
34+
// }
35+
36+
// thead th,
37+
// tbody td {
38+
// padding: 5px;
39+
// }
40+
41+
// tbody tr {
42+
// &:nth-child(even) {
43+
// background-color: var(--background-alt-grey);
44+
// }
45+
// &:nth-child(odd) {
46+
// background-color: var(--background-default-grey-hover);
47+
// }
48+
49+
// &:hover {
50+
// background-color: var(--background-contrast-blue-ecume);
51+
// }
52+
// }
53+
// }
54+
.fundings-datatable {
55+
// .test0 {
56+
// align-items: center;
57+
// display: flex;
58+
// &.first {
59+
// flex-grow: 2;
60+
// }
61+
// }
2962

30-
thead th,
31-
tbody td {
63+
.test1 {
3264
padding: 5px;
65+
height: 120px;
66+
67+
&:last-child {
68+
69+
.test2 {
70+
background-color: red;
71+
display: flex;
72+
justify-content: flex-start;
73+
height: 100%;
74+
}
75+
}
3376
}
3477

35-
tbody tr {
36-
&:nth-child(even) {
37-
background-color: var(--background-alt-grey);
78+
.test2 {
79+
padding: 10;
80+
display: block;
81+
82+
&.first {
83+
height: 50px;
3884
}
39-
&:nth-child(odd) {
40-
background-color: var(--background-default-grey-hover);
85+
&.second {
86+
// height: 25px;
87+
// font-size: 0.20px;
4188
}
89+
}
4290

43-
&:hover {
44-
background-color: var(--background-contrast-blue-ecume);
45-
}
91+
input.border {
92+
border: 1px solid white;
93+
}
94+
}
95+
96+
.fr-table.fr-table--sm {
97+
font-size: 0.75rem;
98+
99+
th {
100+
font-size: 0.75rem;
101+
}
102+
103+
td {
104+
font-size: 0.75rem;
105+
white-space: nowrap;
106+
overflow: hidden;
107+
text-overflow: ellipsis;
108+
max-width: 0;
46109
}
47110
}

0 commit comments

Comments
 (0)