bixi/packages/core/table/demo/simple-table-frontend-pagination.md

企业级中后台前端解决方案

---
title:
  zh-CN: 前端分页
  en-US: 前端分页
order: 130
---

## zh-CN
如果您不需要服务端分页，可以使用前端分页

## en-US
如果您不需要服务端分页，可以使用前端分页

```ts
import { Component } from '@angular/core';
import { ICol, EColType } from '@bixi/core/table';

interface IPerson {
  name: string;
  age: number;
}
const persons: IPerson[] = [...Array(100)].fill('').map( (e, i) => ({
  name: `name${e}_${i + 1}`,
  age: i + 1,
  id: `${i + 1}`
}));

@Component({
  selector: 'components-table-text',
  template: `
  {{selectedKeys | json}}
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading"
      [(selectedKeys)]="selectedKeys"
      [frontPagination]="true"
    >
    </bixi-table>
`
})
export class ComponentsTableSimpleTableTextComponent {
  loading = false;
  rows = persons;
  selectedKeys = [];
  cols: ICol[] = [
     {
      type: EColType.checkbox,
      key: 'id'
    },
    {
      name: '姓名',
      key: 'name',
      onClick: (item: IPerson) => {
        console.warn('click', item);
      }
    },
    {
      name: '年龄',
      key: 'age',
      tooltip: (age: number, row: IPerson) => {
        return `${ row.name } 今年 ${ age } 岁了`;
      }
    }
  ];
}
```