ant design table how to display empty rows - antd

Question

I'm working with ant design using the Table component and am wondering if there is a way to display 10 rows at all times even if they are empty. For example, I have a data set with 11 items. The page size is set to 10, so the first ten items show on the first page and the last item shows on the second page. But the second page displays only one row and I would like it to display 10 (one with the item and nine empty rows).
How can I go about doing this? Should I be writing a function or is there a prop I can use on the Table component?
This is an example of what my second page looks like currently ^^^
my table component:
import React from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Asylum Office',
dataIndex: 'asylumOffice',
key: 'asylumOffice',
},
{
title: 'Citizenship',
dataIndex: 'citizenship',
key: 'citizenship',
},
{
title: 'Race or Ethnicity',
dataIndex: 'raceOrEthnicity',
key: 'raceOrEthnicity',
},
{
title: 'Case Outcome',
dataIndex: 'caseOutcome',
key: 'caseOutcome',
},
{
title: 'Completion',
dataIndex: 'completion',
key: 'completion',
},
{
title: 'Current Date',
dataIndex: 'currentDate',
key: 'currentDate',
},
];
const data = [
{
key: '1',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'other',
caseOutcome: 'pending',
completion: 'n',
currentDate: 'f',
},
{
key: '2',
asylumOffice: 'AWS',
citizenship: 'A',
raceOrEthnicity: 'other',
caseOutcome: 'pending',
completion: 'Y',
currentDate: 'e',
},
{
key: '3',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '4',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '5',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '6',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '7',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '8',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '9',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '10',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
{
key: '11',
asylumOffice: 'AyS',
citizenship: 'h',
raceOrEthnicity: 'latino',
caseOutcome: 'pending',
completion: 's',
currentDate: 'f',
},
];
function RenderTablePage(props) {
return (
<div>
<Table
columns={columns}
dataSource={data}
title={() => 'Tabular View'}
/>
</div>
);
}
export default RenderTablePage;