Skip to content

Commit

Permalink
Make tables on edit payroll page scrollable
Browse files Browse the repository at this point in the history
  • Loading branch information
@CaitBarnard
CaitBarnard committed Nov 28, 2024
1 parent e00c64c commit 78548ba
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 50 deletions.
39 changes: 22 additions & 17 deletions front_end/src/Components/EditPayroll/PayrollTable/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,31 @@ export default function PayrollTable({
}) {
return (
<>
<table className="govuk-table">
<thead className="govuk-table__head">
<tr className="govuk-table__row">
{headers.map((header) => {
<div class="scrollable-div">
<table className="govuk-table">
<thead className="govuk-table__head">
<tr className="govuk-table__row">
{headers.map((header) => {
return (
<th scope="col" className="govuk-table__header" key={header}>
{header}
</th>
);
})}
</tr>
</thead>
<tbody className="govuk-table__body">
{payroll.map((row) => {
return (
<th scope="col" className="govuk-table__header" key={header}>
{header}
</th>
<RowComponent
row={row}
onTogglePayPeriods={onTogglePayPeriods}
/>
);
})}
</tr>
</thead>
<tbody className="govuk-table__body">
{payroll.map((row) => {
return (
<RowComponent row={row} onTogglePayPeriods={onTogglePayPeriods} />
);
})}
</tbody>
</table>
</tbody>
</table>
</div>
</>
);
}
4 changes: 4 additions & 0 deletions front_end/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,3 +368,7 @@ th {
.upload-list {
font-size: 16px;
}

.scrollable-div {
overflow-x: scroll;
}
68 changes: 35 additions & 33 deletions payroll/templates/payroll/page/edit_payroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,41 @@ <h1 class="govuk-heading-l">Edit payroll</h1>
<div id="payroll-app"></div>

<h2 class="govuk-heading-m">Payroll forecast</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Programme code</th>
<th scope="col" class="govuk-table__header">Natural code</th>
<th scope="col" class="govuk-table__header">Pay type</th>
{% for month in months %}
<th scope="col" class="govuk-table__header">{{ month }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="govuk-table__body">
{% for row in payroll_forecast_report %}
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">{{ row.programme_code }}</th>
<th scope="row" class="govuk-table__header">{{ row.pay_element__type__group__natural_code }}</th>
<th scope="row" class="govuk-table__header">{{ row.pay_element__type__group__name }}</th>
<td class="govuk-table__cell">{{ row.period_1_sum }}</td>
<td class="govuk-table__cell">{{ row.period_2_sum }}</td>
<td class="govuk-table__cell">{{ row.period_3_sum }}</td>
<td class="govuk-table__cell">{{ row.period_4_sum }}</td>
<td class="govuk-table__cell">{{ row.period_5_sum }}</td>
<td class="govuk-table__cell">{{ row.period_6_sum }}</td>
<td class="govuk-table__cell">{{ row.period_7_sum }}</td>
<td class="govuk-table__cell">{{ row.period_8_sum }}</td>
<td class="govuk-table__cell">{{ row.period_9_sum }}</td>
<td class="govuk-table__cell">{{ row.period_10_sum }}</td>
<td class="govuk-table__cell">{{ row.period_11_sum }}</td>
<td class="govuk-table__cell">{{ row.period_12_sum }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="scrollable-div">
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Programme code</th>
<th scope="col" class="govuk-table__header">Natural code</th>
<th scope="col" class="govuk-table__header">Pay type</th>
{% for month in months %}
<th scope="col" class="govuk-table__header">{{ month }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="govuk-table__body">
{% for row in payroll_forecast_report %}
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">{{ row.programme_code }}</th>
<th scope="row" class="govuk-table__header">{{ row.pay_element__type__group__natural_code }}</th>
<th scope="row" class="govuk-table__header">{{ row.pay_element__type__group__name }}</th>
<td class="govuk-table__cell">{{ row.period_1_sum }}</td>
<td class="govuk-table__cell">{{ row.period_2_sum }}</td>
<td class="govuk-table__cell">{{ row.period_3_sum }}</td>
<td class="govuk-table__cell">{{ row.period_4_sum }}</td>
<td class="govuk-table__cell">{{ row.period_5_sum }}</td>
<td class="govuk-table__cell">{{ row.period_6_sum }}</td>
<td class="govuk-table__cell">{{ row.period_7_sum }}</td>
<td class="govuk-table__cell">{{ row.period_8_sum }}</td>
<td class="govuk-table__cell">{{ row.period_9_sum }}</td>
<td class="govuk-table__cell">{{ row.period_10_sum }}</td>
<td class="govuk-table__cell">{{ row.period_11_sum }}</td>
<td class="govuk-table__cell">{{ row.period_12_sum }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock content %}

{% block scripts %}
Expand Down

0 comments on commit 78548ba

Please sign in to comment.