Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Issue 660 - Increase page_current and page_count fields size to accommodate larger numbers #819

Merged
merged 4 commits into from
Aug 21, 2020
Merged

Issue 660 - Increase page_current and page_count fields size to accommodate larger numbers #819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1bae3cc
Support displaying up to 6-7 characters for current page / total page…
Aug 20, 2020
42e95eb
changelog
Aug 20, 2020
9fe5f70
typo
Aug 20, 2020
7b3cc55
dynamic and reactive width
Aug 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Fixed
- [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
- [#818](https://github.com/plotly/dash-table/pull/818) Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click
- [#819](https://github.com/plotly/dash-table/pull/819) Fix pagination `page_current` and `page_count` fields to accommodate larger numbers

## [4.9.0] - 2020-07-27
### Added
Expand Down
51 changes: 33 additions & 18 deletions src/dash-table/components/PageNavigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,17 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
render() {
const {paginator, page_current} = this.props;

return paginator.lastPage !== undefined &&
paginator.lastPage <= 0 ? null : (
if (paginator.lastPage !== undefined && paginator.lastPage <= 0) {
return null;
}

const pageChars = Math.max(
3,
((paginator.lastPage ?? 0) + 1).toString().length
);
const minWidth = `${pageChars + 1}ch`;

return (
<div className='previous-next-container'>
<button
className='first-page'
Expand All @@ -43,26 +52,32 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
</button>

<div className='page-number'>
<input
type='text'
className='current-page'
onBlur={event => {
this.goToPage(event.target.value);
event.target.value = '';
}}
onKeyDown={event => {
if (event.keyCode === KEY_CODES.ENTER) {
event.currentTarget.blur();
}
}}
placeholder={(page_current + 1).toString()}
defaultValue=''
></input>
<div className='current-page-container'>
<div className='current-page-shadow' style={{minWidth}}>
{(page_current + 1).toString()}
</div>
<input
type='text'
className='current-page'
style={{minWidth}}
onBlur={event => {
this.goToPage(event.target.value);
event.target.value = '';
}}
onKeyDown={event => {
if (event.keyCode === KEY_CODES.ENTER) {
event.currentTarget.blur();
}
}}
placeholder={(page_current + 1).toString()}
defaultValue=''
></input>
</div>

{paginator.lastPage !== undefined ? ' / ' : ''}

{paginator.lastPage !== undefined ? (
<div className='last-page'>
<div className='last-page' style={{minWidth}}>
{paginator.lastPage + 1}
</div>
) : (
Expand Down
58 changes: 35 additions & 23 deletions src/dash-table/components/Table/Table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,41 +143,53 @@

.dash-table-container {
.previous-next-container {
display: inline-block;
float: right;
padding: 5px 0px;

.page-number {
font-family: monospace;
display: inline-block;

.last-page {
min-width: 30px;
display: inline-block;
text-align: center;
margin: 0.5em;
display: inline-block;
text-align: center;
padding: 1px 2px;
}
}

input.current-page {
display: inline-block;
border-bottom: solid lightgrey 1px !important;
color: black;
border: none;
width: 30px;
text-align: center;
font-family: monospace;
font-size: 10pt;
margin: 0.5em;
.current-page-container {
display: inline-block;
position: relative;

&::placeholder {
color: black;
}
.current-page-shadow,
input.current-page {
display: inline-block;
border-bottom: solid lightgrey 1px !important;
color: black;
border: none;
text-align: center;
font-family: monospace;
font-size: 10pt;
padding: 1px 2px;

&::placeholder {
color: black;
}

&:focus {
outline: none;
&:focus {
outline: none;

&::placeholder {
opacity: 0;
&::placeholder {
opacity: 0;
}
}
}

input.current-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
Expand Down
45 changes: 42 additions & 3 deletions tests/visual/percy-storybook/Style.percy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,10 +384,49 @@ storiesOf('DashTable/Style type condition', module)
style_data_conditional={[{
if: { column_editable: true }, background_color: 'MediumPurple'
}]}
pagination_settings={{
current_page: 0,
page_size: 10
page_current={0}
page_size={10}
/>))
.add('large current page', () => (<DataTable
id='paging-large-current-page'
data={mock.data.slice(0, 10)}
columns={mock.columns.map((col: any) => R.merge(col, {
name: col.name,
deletable: true
}))}
style_table={{
width: '100%'
}}
row_deletable={true}
row_selectable={true}
pagination_mode={'fe'}
style_data_conditional={[{
if: { column_editable: true }, background_color: 'MediumPurple'
}]}
page_action='custom'
page_count={999999}
page_current={987654}
page_size={10}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A simple visual test to see that numbers with 6 digits are displayed correctly.

/>))
.add('large current page and unknown page count', () => (<DataTable
id='paging-large-current-page'
data={mock.data.slice(0, 10)}
columns={mock.columns.map((col: any) => R.merge(col, {
name: col.name,
deletable: true
}))}
style_table={{
width: '100%'
}}
row_deletable={true}
row_selectable={true}
pagination_mode={'fe'}
style_data_conditional={[{
if: { column_editable: true }, background_color: 'MediumPurple'
}]}
page_action='custom'
page_current={987654}
page_size={10}
/>))
.add('data column_id array', () => (<DataTable
{...DEFAULT_TABLE}
Expand Down