# antd-table-scroll-xaxis-top

> scroll table xaxis at top in ant design

Latest version **1.0.4** (published 2022-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install antd-table-scroll-xaxis-top
pnpm add antd-table-scroll-xaxis-top
yarn add antd-table-scroll-xaxis-top
bun add antd-table-scroll-xaxis-top
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-06-23 |
| First published | 2021-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 93.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | superwf@gmail.com |
| Maintainers | superwf |
| Keywords | ant-design, table, scroll, react-component, react, reactjs |

## Links

- npm: https://www.npmjs.com/package/antd-table-scroll-xaxis-top
- Homepage: https://github.com/superwf/antd-table-scroll-xaxis-top
- Issues: https://github.com/superwf/antd-table-scroll-xaxis-top/issues
- npm.io page: https://npm.io/package/antd-table-scroll-xaxis-top

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) >=4.1.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-06-23
- 1.0.3 — 2022-06-21
- 1.0.2 — 2021-11-29
- 1.0.1 — 2021-11-11
- 0.1.6 — 2021-11-10
- 0.1.5 — 2021-11-10
- 0.1.4 — 2021-11-10
- 0.1.3 — 2021-11-10
- 0.1.2 — 2021-11-10
- 0.1.1 — 2021-11-09

## README

# 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](#scroll-antd-table-xaxis-top)
  - [Install](#Install)
  - [Demo](#demo)
    - [Before](#before)
    - [After](#After)
    - [live](#live)
  - [Example](#Example)
    - [From CDN](#from-cdn)
  - [Api](#api)

## Install

```sh
yarn add antd-table-scroll-xaxis-top
```

Worked with antd 3 / 4, and react > 16.8

## Demo

### Before

![./doc/before.gif](https://github.com/superwf/antd-table-scroll-xaxis-top/raw/master/doc/before.gif)

### After

![./doc/after.gif](https://github.com/superwf/antd-table-scroll-xaxis-top/raw/master/doc/after.gif)

### Live

- [antd3 live demo](https://superwf.github.io/demo/antd3.html)

- [antd4 live demo](https://superwf.github.io/demo/antd4.html)

## Example

```typescript
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

```html
<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.

```javascript
const { AntdTableScrollXaxisTop } = window.AntdTableScrollXaxisTop
```

So the import way is always

```typescript
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' }}`

---
_Source: https://npm.io/package/antd-table-scroll-xaxis-top · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._