mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
feat: Table pagination position add more option (#22647)
* feat: Table pagination position add more option * table upate snap * Table pagination demo remove not use code * update snap
This commit is contained in:
Tom Xu
GitHub
parent
a9d6307530
commit
fa030a6511
@ -44,8 +44,19 @@ export interface PaginationProps {
|
||||
showLessItems?: boolean;
|
||||
}
|
||||
|
||||
export type PaginationPosition =
|
||||
| 'top'
|
||||
| 'bottom'
|
||||
| 'both'
|
||||
| 'topLeft'
|
||||
| 'topCenter'
|
||||
| 'topRight'
|
||||
| 'bottomLeft'
|
||||
| 'bottomCenter'
|
||||
| 'bottomRight';
|
||||
|
||||
export interface PaginationConfig extends PaginationProps {
|
||||
position?: 'top' | 'bottom' | 'both';
|
||||
position?: [PaginationPosition] | PaginationPosition;
|
||||
}
|
||||
|
||||
export type PaginationLocale = any;
|
||||
@ -56,7 +67,7 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
|
||||
private inferredSmall: boolean = false;
|
||||
|
||||
componentDidMount() {
|
||||
this.token = ResponsiveObserve.subscribe(screens => {
|
||||
this.token = ResponsiveObserve.subscribe((screens) => {
|
||||
const { xs } = screens;
|
||||
const { size, responsive } = this.props;
|
||||
const inferredSmall = !!(xs && !size && responsive);
|
||||
|
||||
@ -132,7 +132,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
};
|
||||
|
||||
const expandType: ExpandType = React.useMemo<ExpandType>(() => {
|
||||
if (rawData.some(item => (item as any)[childrenColumnName])) {
|
||||
if (rawData.some((item) => (item as any)[childrenColumnName])) {
|
||||
return 'nest';
|
||||
}
|
||||
|
||||
@ -377,26 +377,41 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
paginationSize = mergedSize === 'small' || mergedSize === 'middle' ? 'small' : undefined;
|
||||
}
|
||||
|
||||
const renderPagination = () => (
|
||||
const renderPagination = (position: string = 'right') => (
|
||||
<Pagination
|
||||
className={`${prefixCls}-pagination`}
|
||||
className={`${prefixCls}-pagination ${prefixCls}-pagination-${position}`}
|
||||
{...mergedPagination}
|
||||
size={paginationSize}
|
||||
/>
|
||||
);
|
||||
|
||||
switch (mergedPagination.position) {
|
||||
case 'top':
|
||||
topPaginationNode = renderPagination();
|
||||
break;
|
||||
|
||||
case 'both':
|
||||
topPaginationNode = renderPagination();
|
||||
if (mergedPagination.position !== null && Array.isArray(mergedPagination.position)) {
|
||||
const topPos = mergedPagination.position.find((p) => p.indexOf('top') !== -1);
|
||||
const bottomPos = mergedPagination.position.find((p) => p.indexOf('bottom') !== -1);
|
||||
if (!topPos && !bottomPos) {
|
||||
bottomPaginationNode = renderPagination();
|
||||
break;
|
||||
} else {
|
||||
if (topPos) {
|
||||
topPaginationNode = renderPagination(topPos!.toLowerCase().replace('top', ''));
|
||||
}
|
||||
if (bottomPos) {
|
||||
bottomPaginationNode = renderPagination(bottomPos!.toLowerCase().replace('bottom', ''));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// compatible
|
||||
switch (mergedPagination.position) {
|
||||
case 'top':
|
||||
topPaginationNode = renderPagination();
|
||||
break;
|
||||
|
||||
default:
|
||||
bottomPaginationNode = renderPagination();
|
||||
case 'both':
|
||||
topPaginationNode = renderPagination();
|
||||
bottomPaginationNode = renderPagination();
|
||||
break;
|
||||
|
||||
default:
|
||||
bottomPaginationNode = renderPagination();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -417,7 +432,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
<div
|
||||
className={wrapperClassNames}
|
||||
style={style}
|
||||
onTouchMove={e => {
|
||||
onTouchMove={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
|
||||
@ -28,7 +28,7 @@ describe('Table.pagination', () => {
|
||||
}
|
||||
|
||||
function renderedNames(wrapper) {
|
||||
return wrapper.find('BodyRow').map(row => row.props().record.name);
|
||||
return wrapper.find('BodyRow').map((row) => row.props().record.name);
|
||||
}
|
||||
|
||||
it('renders pagination correctly', () => {
|
||||
@ -60,10 +60,7 @@ describe('Table.pagination', () => {
|
||||
const wrapper = mount(createTable());
|
||||
|
||||
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']);
|
||||
wrapper
|
||||
.find('Pager')
|
||||
.last()
|
||||
.simulate('click');
|
||||
wrapper.find('Pager').last().simulate('click');
|
||||
expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
|
||||
});
|
||||
|
||||
@ -91,17 +88,11 @@ describe('Table.pagination', () => {
|
||||
);
|
||||
expect(scrollTo).toHaveBeenCalledTimes(0);
|
||||
|
||||
wrapper
|
||||
.find('Pager')
|
||||
.last()
|
||||
.simulate('click');
|
||||
wrapper.find('Pager').last().simulate('click');
|
||||
expect(scrollTo).toHaveBeenCalledTimes(1);
|
||||
|
||||
wrapper.find('.ant-select-selector').simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-select-item')
|
||||
.last()
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-select-item').last().simulate('click');
|
||||
expect(scrollTo).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
@ -116,10 +107,7 @@ describe('Table.pagination', () => {
|
||||
}),
|
||||
);
|
||||
|
||||
wrapper
|
||||
.find('Pager')
|
||||
.last()
|
||||
.simulate('click');
|
||||
wrapper.find('Pager').last().simulate('click');
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith(
|
||||
{
|
||||
@ -196,36 +184,17 @@ describe('Table.pagination', () => {
|
||||
});
|
||||
|
||||
it('specify the position of pagination', () => {
|
||||
const wrapper = mount(createTable({ pagination: { position: 'top' } }));
|
||||
const wrapper = mount(createTable({ pagination: { position: ['topLeft'] } }));
|
||||
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin-container')
|
||||
.childAt(0)
|
||||
.find('.ant-pagination'),
|
||||
).toHaveLength(1);
|
||||
wrapper.setProps({ pagination: { position: 'bottom' } });
|
||||
|
||||
expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
|
||||
wrapper.setProps({ pagination: { position: ['bottomRight'] } });
|
||||
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin-container')
|
||||
.childAt(1)
|
||||
.find('.ant-pagination'),
|
||||
).toHaveLength(1);
|
||||
wrapper.setProps({ pagination: { position: 'both' } });
|
||||
expect(wrapper.find('.ant-spin-container').childAt(1).find('.ant-pagination')).toHaveLength(1);
|
||||
wrapper.setProps({ pagination: { position: ['topLeft', 'bottomRight'] } });
|
||||
expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin-container')
|
||||
.childAt(0)
|
||||
.find('.ant-pagination'),
|
||||
).toHaveLength(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin-container')
|
||||
.childAt(2)
|
||||
.find('.ant-pagination'),
|
||||
).toHaveLength(1);
|
||||
expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
|
||||
expect(wrapper.find('.ant-spin-container').childAt(2).find('.ant-pagination')).toHaveLength(1);
|
||||
});
|
||||
|
||||
/**
|
||||
@ -274,17 +243,9 @@ describe('Table.pagination', () => {
|
||||
);
|
||||
wrapper.find('.ant-select-selector').simulate('mousedown');
|
||||
jest.runAllTimers();
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
|
||||
dropdownWrapper
|
||||
.find('.ant-select-item-option')
|
||||
.at(3)
|
||||
.simulate('click');
|
||||
dropdownWrapper.find('.ant-select-item-option').at(3).simulate('click');
|
||||
expect(onShowSizeChange).toHaveBeenCalled();
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
jest.useRealTimers();
|
||||
@ -320,4 +281,9 @@ describe('Table.pagination', () => {
|
||||
const wrapper = mount(createTable({ pagination: { total: null } }));
|
||||
expect(wrapper.find('.ant-pagination-item-1').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders pagination topLeft and bottomRight', () => {
|
||||
const wrapper = mount(createTable({ pagination: ['topLeft', 'bottomRight'] }));
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -81,7 +81,7 @@ exports[`Table.expand click to expand 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
|
||||
@ -85,7 +85,7 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -318,3 +318,168 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table.pagination renders pagination topLeft and bottomRight 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Lucy
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Tom
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Jerry
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -239,7 +239,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -511,7 +511,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -788,7 +788,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -1082,7 +1082,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
|
||||
@ -177,7 +177,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
|
||||
598
components/table/__tests__/__snapshots__/demo.test.js.snap
Executable file → Normal file
598
components/table/__tests__/__snapshots__/demo.test.js.snap
Executable file → Normal file
@ -432,7 +432,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -645,7 +645,7 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -927,7 +927,7 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -1262,7 +1262,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -1462,7 +1462,7 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -3223,7 +3223,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -3443,7 +3443,7 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -3863,7 +3863,7 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -4233,7 +4233,7 @@ exports[`renders ./components/table/demo/ellipsis.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -4526,7 +4526,7 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -4789,7 +4789,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -5153,7 +5153,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -6076,7 +6076,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -7334,7 +7334,7 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -8177,7 +8177,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination mini"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -8696,7 +8696,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -9023,7 +9023,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -9428,7 +9428,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -9748,7 +9748,7 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -9828,6 +9828,550 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin-bottom:10px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="topLeft"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
topLeft
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="topCenter"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
topCenter
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="topRight"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
topRight
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
none
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin-bottom:10px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="bottomLeft"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
bottomLeft
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="bottomCenter"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
bottomCenter
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="bottomRight"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
bottomRight
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="none"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
none
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-left"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Tags
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
John Brown
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York No. 1 Lake Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
NICE
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
DEVELOPER
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
Invite John Brown
|
||||
</a>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Jim Green
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
42
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-volcano"
|
||||
>
|
||||
LOSER
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
Invite Jim Green
|
||||
</a>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="3"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
Joe Black
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="ant-tag ant-tag-green"
|
||||
>
|
||||
COOL
|
||||
</span>
|
||||
<span
|
||||
class="ant-tag ant-tag-geekblue"
|
||||
>
|
||||
TEACHER
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
>
|
||||
Invite Joe Black
|
||||
</a>
|
||||
<a>
|
||||
Delete
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
@ -10240,7 +10784,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -10564,7 +11108,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -10944,7 +11488,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -11515,7 +12059,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -12133,7 +12677,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -12525,7 +13069,7 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -12762,7 +13306,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination mini"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -12959,7 +13503,7 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination mini"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
|
||||
144
components/table/demo/pagination.md
Normal file
144
components/table/demo/pagination.md
Normal file
@ -0,0 +1,144 @@
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
en-US: Pagination Settings
|
||||
zh-CN: 分页设置
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
表格的分页设置。
|
||||
|
||||
## en-US
|
||||
|
||||
Table pagination settings.
|
||||
|
||||
```jsx
|
||||
import { Table, Tag, Radio } from 'antd';
|
||||
|
||||
const topOptions = [
|
||||
{ label: 'topLeft', value: 'topLeft' },
|
||||
{ label: 'topCenter', value: 'topCenter' },
|
||||
{ label: 'topRight', value: 'topRight' },
|
||||
{ label: 'none', value: 'none' },
|
||||
];
|
||||
|
||||
const bottomOptions = [
|
||||
{ label: 'bottomLeft', value: 'bottomLeft' },
|
||||
{ label: 'bottomCenter', value: 'bottomCenter' },
|
||||
{ label: 'bottomRight', value: 'bottomRight' },
|
||||
{ label: 'none', value: 'none' },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (text) => <a>{text}</a>,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
dataIndex: 'tags',
|
||||
render: (tags) => (
|
||||
<span>
|
||||
{tags.map((tag) => {
|
||||
let color = tag.length > 5 ? 'geekblue' : 'green';
|
||||
if (tag === 'loser') {
|
||||
color = 'volcano';
|
||||
}
|
||||
return (
|
||||
<Tag color={color} key={tag}>
|
||||
{tag.toUpperCase()}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
<a style={{ marginRight: 16 }}>Invite {record.name}</a>
|
||||
<a>Delete</a>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
tags: ['nice', 'developer'],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
tags: ['loser'],
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
tags: ['cool', 'teacher'],
|
||||
},
|
||||
];
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
top: 'topLeft',
|
||||
bottom: 'bottomRight',
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Radio.Group
|
||||
style={{ marginBottom: 10 }}
|
||||
options={topOptions}
|
||||
value={this.state.top}
|
||||
onChange={(e) => {
|
||||
this.setState({ top: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Radio.Group
|
||||
style={{ marginBottom: 10 }}
|
||||
options={bottomOptions}
|
||||
value={this.state.bottom}
|
||||
onChange={(e) => {
|
||||
this.setState({ bottom: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<Table
|
||||
columns={columns}
|
||||
pagination={{ position: [this.state.top, this.state.bottom] }}
|
||||
dataSource={data}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
@ -92,14 +92,14 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
|
||||
<Table
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: event => {}, // click row
|
||||
onDoubleClick: event => {}, // double click row
|
||||
onContextMenu: event => {}, // right button click row
|
||||
onMouseEnter: event => {}, // mouse enter row
|
||||
onMouseLeave: event => {}, // mouse leave row
|
||||
onClick: (event) => {}, // click row
|
||||
onDoubleClick: (event) => {}, // double click row
|
||||
onContextMenu: (event) => {}, // right button click row
|
||||
onMouseEnter: (event) => {}, // mouse enter row
|
||||
onMouseLeave: (event) => {}, // mouse leave row
|
||||
};
|
||||
}}
|
||||
onHeaderRow={column => {
|
||||
onHeaderRow={(column) => {
|
||||
return {
|
||||
onClick: () => {}, // click header row
|
||||
};
|
||||
@ -151,9 +151,9 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
|
||||
Properties for pagination.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------------------ | --------------------------- | -------- |
|
||||
| position | specify the position of `Pagination` | `top` \| `bottom` \| `both` | `bottom` |
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| position | specify the position of `Pagination`, could be `topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | `['bottomRight']` |
|
||||
|
||||
More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
|
||||
@ -265,7 +265,7 @@ If `dataSource[i].key` is not provided, then you should specify the primary key
|
||||
// primary key is uid
|
||||
return <Table rowKey="uid" />;
|
||||
// or
|
||||
return <Table rowKey={record => record.uid} />;
|
||||
return <Table rowKey={(record) => record.uid} />;
|
||||
```
|
||||
|
||||
## Migrate to v4
|
||||
|
||||
@ -95,16 +95,16 @@ const columns = [
|
||||
|
||||
```jsx
|
||||
<Table
|
||||
onRow={record => {
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: event => {}, // 点击行
|
||||
onDoubleClick: event => {},
|
||||
onContextMenu: event => {},
|
||||
onMouseEnter: event => {}, // 鼠标移入行
|
||||
onMouseLeave: event => {},
|
||||
onClick: (event) => {}, // 点击行
|
||||
onDoubleClick: (event) => {},
|
||||
onContextMenu: (event) => {},
|
||||
onMouseEnter: (event) => {}, // 鼠标移入行
|
||||
onMouseLeave: (event) => {},
|
||||
};
|
||||
}}
|
||||
onHeaderRow={column => {
|
||||
onHeaderRow={(column) => {
|
||||
return {
|
||||
onClick: () => {}, // 点击表头行
|
||||
};
|
||||
@ -156,9 +156,9 @@ const columns = [
|
||||
|
||||
分页的配置项。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ------------------ | --------------------------- | -------- |
|
||||
| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| position | 指定分页显示的位置， 取值为`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | `['bottomRight']` |
|
||||
|
||||
更多配置项，请查看 [`Pagination`](/components/pagination/)。
|
||||
|
||||
@ -269,7 +269,7 @@ class NameColumn extends Table.Column<User> {}
|
||||
// 比如你的数据主键是 uid
|
||||
return <Table rowKey="uid" />;
|
||||
// 或
|
||||
return <Table rowKey={record => record.uid} />;
|
||||
return <Table rowKey={(record) => record.uid} />;
|
||||
```
|
||||
|
||||
## 从 v3 升级到 v4
|
||||
|
||||
@ -161,5 +161,5 @@ export interface SorterResult<RecordType> {
|
||||
export type GetPopupContainer = (triggerNode: HTMLElement) => HTMLElement;
|
||||
|
||||
export interface TablePaginationConfig extends PaginationConfig {
|
||||
position?: 'top' | 'bottom' | 'both';
|
||||
// position?: 'top' | 'bottom' | 'both';
|
||||
}
|
||||
|
||||
@ -156,10 +156,23 @@
|
||||
|
||||
// ========================== Pagination ==========================
|
||||
&-pagination.@{ant-prefix}-pagination {
|
||||
float: right;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
&-pagination {
|
||||
&-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// = Function =
|
||||
// ================================================================
|
||||
|
||||
@ -2737,7 +2737,7 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination mini"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
@ -3151,7 +3151,7 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination mini"
|
||||
class="ant-pagination ant-table-pagination ant-table-pagination-right mini"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
|
||||
Loading…
Reference in New Issue
Block a user