el-tableにてページネーションとソートを共存させるにはどうすればいいか。

他のライブラリは使わずに、
el-tableでソートボタンorヘッダーカラムがクリックされたときに、
クリックしたところでソートされたAPIを呼び出したい。

数が増えすぎてしまうため、
別に作られたページネーションが、
表示しているページの中限定でソートし表示していた。
だがそれだと全件でソートすることができない。

以下ソースは一旦ページネーションの部分は消し、
全件呼び出し中にソート機能を実装したもの。
ソートボタンorヘッダーカラムのクリックで
APIが再読み込みされるところまではできた。
ここからどうすればいいのか悩んでいる。

該当のソースコード

vue
1	<el-table @sort-change="sortChange" @header-click="headerClick" 
2         :data="this.tableData" :default-sort="{prop: 'date', order: 'descending'}" 
3         class="table-striped border">
4
5		            <el-table-column
6		              v-for="column in tableColumns"
7		              :key="column.label"
8		              :min-width="column.minWidth"
9		              :prop="column.prop"
10		              :label="column.label"
11			      sortable
12			      :formatter="columnValueFormatter"></el-table-column>
13
14	data() {
15		return {
16			tableData: [],
17			tableColumns: [
18				{
19					prop: "formatted_datetime",
20					label: "日時",
21					minWidth: 100
22				},
23				{
24					prop: "operation",
25					label: "行動",
26					minWidth: 100
27				},
28				{
29					prop: "status",
30					label: "結果",
31					minWidth: 100
32				},
33				{
34					prop: "username",
35					label: "ユーザー",
36					minWidth: 100
37				}],
38			condition:[{
39				page:1,
40				},
41				{
42				pageCount:1,
43			}]
44			
45		
46	computed: {}
47	methods: {
48			sortChange(sortProps){
49          this.headerClick(sortProps.column,event) 
50      },
51      headerClick(column, event){
52		console.log("Header clicked: " + JSON.stringify(column))
53		this.apiGet()
54	},
55
56
57
58