Scroll-antd-table-xaxis-top

Too much table data ?

Need scroll down too much to scroll to see the scrollbar then move to see the right part of table.

Do not worry, laowang can help you 🤘, just try this one.

Work with antd v3 and v4, automatically!

• scroll-antd-table-xaxis-top
  • Install
  • Demo
    • Before
    • After
    • live
  • Example
    • From CDN
  • Api

Install

yarn add antd-table-scroll-xaxis-top

Worked with antd 3 / 4, and react > 16.8

Demo

Before

After

Live

• antd3 live demo

• antd4 live demo

Example

import { Table, Card } from 'antd'
import { AntdTableScrollXaxisTop } from 'antd-table-scroll-xaxis-top'
// ... in compoent
  <AntdTableScrollXaxisTop>
    <Table scroll={{ x: 'max-content' }} columns={columns} dataSource={dataSource} pagination={false} />
  </AntdTableScrollXaxisTop>

From CDN

<script src="https://unpkg.com/antd-table-scroll-xaxis-top/dist/index.umd.min.js"></script>

Global var name is AntdTableScrollXaxisTop.

The component is a property. Use it this way.

const { AntdTableScrollXaxisTop } = window.AntdTableScrollXaxisTop

So the import way is always

import { AntdTableScrollXaxisTop } from 'antd-table-scroll-xaxis-top'

Api

| prop | type | required | description | | ---- | ---- | -------- | ----------- | | prefixCls | string | no | same with antd ConfigProvider prefixCls, unless you have a customized version antd, you should not use it | | debugName | string | no | show some debug info with this for prefix | | children | Table | yes | antd Table, must one and only one Table child | | className and more | | no | all div acceptable props can be used |

General questions

• Why my table does not has xaxis scroll bar after use this?

  • Set each column with a confirm width, as { title: 'xxx', dataIndex: 'yyy', width: 200 }

  • Set Table prop scroll, as scroll={{ x: 'max-content' }}