bixi/packages/core/table/demo/simple-table-scroll.md

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

---
title:
  zh-CN: 表格滚动
  en-US: Table Scrolling
order: 140
---

## zh-CN
如果遇到列数过多的问题，我们建议您使用表格滚动

## en-US
If you encounter problems with too many columns, we recommend that you use table scrolling

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

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

@Component({
  selector: 'components-table-text',
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [loading]="loading"
      [scroll]="{ x: '2100px' }"
    >
    </bixi-table>
`
})
export class ComponentsTableSimpleTableTextComponent {
  loading = false;
  rows = persons;
  cols: ICol[] = [
    {
      name: 'Column 1',
      key: 'name',
      fixed: 'left',
      width: '100px',
    },
    {
      name: 'Column 2',
      key: 'longText',
      fixed: 'left',
      ellipsis: true,
      width: '100px',
    },
    {
      name: 'Column 3',
      key: 'longText',
      fixed: 'left',
      ellipsis: true,
      width: '100px'
    },
    {
      name: 'Column 4',
      key: 'name'
    },
    {
      name: 'Column 5',
      key: 'name'
    },
    {
      name: 'Column 6',
      key: 'name'
    },
    {
      name: 'Column 7',
      key: 'name'
    },
    {
      name: 'Column 8',
      key: 'name'
    },
    {
      name: 'Column 9',
      key: 'name'
    },
    {
      name: 'Column 10',
      key: 'name'
    },
    {
      name: 'Column 11',
      key: 'name'
    },
    {
      name: 'Column 12',
      key: 'name'
    },
    {
      name: 'Column 13',
      key: 'name'
    },
    {
      name: 'Column 14',
      key: 'name'
    },
    {
      name: 'Column 15',
      key: 'name'
    },
    {
      name: 'Column 16',
      key: 'name'
    },
    {
      name: 'Column 17',
      key: 'name'
    },
    {
      name: 'Column 18',
      key: 'name'
    },
    {
      name: 'Column 19',
      key: 'name'
    },
    {
      name: 'Actions',
      key: 'action',
      fixed: 'right',
      width: '100px',
      type: EColType.operations,
      operations: () => {
        return [
          {
            name: 'view'
          }
        ]
      }
    }
  ];
}
```