diff --git a/.editorconfig b/.editorconfig index 604c94ef4..7e3649acc 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,9 +1,16 @@ -# top-most EditorConfig file +# http://editorconfig.org root = true -# Unix-style newlines with a newline ending every file -[*.{js,css}] -end_of_line = lf -insert_final_newline = true +[*] indent_style = space indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.eslintrc.js b/.eslintrc.js index dc13f593f..244a44c08 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,7 +13,9 @@ module.exports = { 'react/no-find-dom-node': 1, 'react/require-default-props': 0, 'no-confusing-arrow': 0, + 'import/no-extraneous-dependencies': 0, 'import/no-named-as-default-member': 0, + 'import/no-unresolved': 0, 'jsx-a11y/label-has-for': 0, 'jsx-a11y/label-has-associated-control': 0, 'jsx-a11y/control-has-associated-label': 0, diff --git a/.fatherrc.js b/.fatherrc.ts similarity index 100% rename from .fatherrc.js rename to .fatherrc.ts index 912aa0aae..d02c60aa9 100644 --- a/.fatherrc.js +++ b/.fatherrc.ts @@ -1,9 +1,9 @@ export default { cjs: 'babel', esm: { type: 'babel', importLibToEs: true }, + runtimeHelpers: true, preCommit: { eslint: true, prettier: true, }, - runtimeHelpers: true, }; diff --git a/.gitignore b/.gitignore index 9f11d8f43..e13cc6d69 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,9 @@ es/ !tests/__mocks__/rc-util/lib examples/debug.tsx .history + +# umi +.umi +.umi-production +.umi-test +.env.local \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 71f4cc89f..214377229 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,11 @@ .doc .storybook es -lib \ No newline at end of file +lib +**/*.svg +**/*.ejs +**/*.html +package.json +.umi +.umi-production +.umi-test diff --git a/.umirc.ts b/.umirc.ts new file mode 100644 index 000000000..89cb80137 --- /dev/null +++ b/.umirc.ts @@ -0,0 +1,17 @@ +// more config: https://d.umijs.org/config +import { defineConfig } from 'dumi'; + +export default defineConfig({ + title: 'rc-table', + favicon: + 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', + logo: + 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', + outputPath: '.doc', + exportStatic: {}, + styles: [ + `a img + svg { + display: none; + }` + ] +}); diff --git a/README.md b/README.md deleted file mode 100644 index 6f577d0c5..000000000 --- a/README.md +++ /dev/null @@ -1,143 +0,0 @@ -# rc-table - -React table component with useful functions. - -[![NPM version][npm-image]][npm-url] -[![build status][github-actions-image]][github-actions-url] -[![Test coverage][codecov-image]][codecov-url] -[![Dependencies][david-image]][david-url] -[![DevDependencies][david-dev-image]][david-dev-url] -[![npm download][download-image]][download-url] -[![bundle size][bundlephobia-image]][bundlephobia-url] - -[npm-image]: http://img.shields.io/npm/v/rc-table.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-table -[github-actions-image]: https://github.com/react-component/table/workflows/CI/badge.svg -[github-actions-url]: https://github.com/react-component/table/actions -[coveralls-image]: https://img.shields.io/coveralls/react-component/table.svg?style=flat-square -[coveralls-url]: https://coveralls.io/r/react-component/table?branch=master -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/table/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/react-component/table/branch/master -[david-url]: https://david-dm.org/react-component/table -[david-image]: https://david-dm.org/react-component/table/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/table?type=dev -[david-dev-image]: https://david-dm.org/react-component/table/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-table.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-table -[bundlephobia-url]: https://bundlephobia.com/result?p=rc-table -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-table - -## install - -[![rc-table](https://nodei.co/npm/rc-table.png)](https://npmjs.org/package/rc-table) - -## Development - -``` -npm install -npm start -``` - -## Example - -https://react-component.github.io/table/ - -## Usage - -```js -import Table from 'rc-table'; - -const columns = [ - { - title: 'Name', - dataIndex: 'name', - key: 'name', - width: 100, - }, - { - title: 'Age', - dataIndex: 'age', - key: 'age', - width: 100, - }, - { - title: 'Address', - dataIndex: 'address', - key: 'address', - width: 200, - }, - { - title: 'Operations', - dataIndex: '', - key: 'operations', - render: () => Delete, - }, -]; - -const data = [ - { name: 'Jack', age: 28, address: 'some where', key: '1' }, - { name: 'Rose', age: 36, address: 'some where', key: '2' }, -]; - -React.render(, mountNode); -``` - -## API - -### Properties - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| tableLayout | `auto` \| `fixed` | `auto` \| `fixed` for any columns is fixed or ellipsis or header is fixed | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout | -| prefixCls | String | rc-table | | -| className | String | | additional className | -| id | String | | identifier of the container div | -| useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns | -| scroll | Object | {x: false, y: false} | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | -| expandable | Object | | Config expand props | -| expandable.defaultExpandAllRows | Boolean | false | Expand All Rows initially | -| expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys | -| expandable.expandedRowKeys | String[] | | current expanded rows keys | -| expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row | -| expandable.expandedRowClassName | Function(recode, index, indent):string | | get expanded row's className | -| expandable.expandRowByClick | boolean | | Support expand by click row | -| expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false | -| expandable.expandIcon | props => ReactNode | | Customize expand icon | -| expandable.indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified | -| expandable.rowExpandable | (record) => boolean | | Config row support expandable | -| expandable.onExpand | Function(expanded, record) | | function to call when click expand icon | -| expandable.onExpandedRowsChange | Function(expandedRows) | | function to call when the expanded rows change | -| rowKey | string or Function(record):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record)` will be use as key. | -| rowClassName | string or Function(record, index, indent):string | | get row's className | -| rowRef | Function(record, index, indent):string | | get row's ref key | -| data | Object[] | | data record array to be rendered | -| onRow | Function(record, index) | | Set custom props per each row. | -| onHeaderRow | Function(record, index) | | Set custom props per each header row. | -| showHeader | Boolean | true | whether table head is shown | -| title | Function(currentData) | | table title render function | -| footer | Function(currentData) | | table footer render function | -| emptyText | React.Node or Function | `No Data` | Display text when data is empty | -| columns | Object[] | | The columns config of table, see table below | -| components | Object | | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details | -| sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar | - -## Column Props - -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| key | String | | key of this column | -| className | String | | className of this column | -| colSpan | Number | | thead colSpan of this column | -| title | React Node | | title of this column | -| dataIndex | String | | display field of the data record | -| width | String \| Number | | width of the specific proportion calculation according to the width of the columns | -| fixed | String \| Boolean | | this column will be fixed when table scroll horizontally: true or 'left' or 'right' | -| align | String | | specify how cell content is aligned | -| ellipsis | Boolean | | specify whether cell content be ellipsized | -| onCell | Function(record, index) | | Set custom props per each cell. | -| onHeaderCell | Function(record) | | Set custom props per each header cell. | -| render | Function(value, row, index) | | The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan | - -## License - -rc-table is released under the MIT license. diff --git a/README.md b/README.md new file mode 120000 index 000000000..ed9e8db96 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +./docs/index.md \ No newline at end of file diff --git a/docs/changelog.md b/docs/changelog.md new file mode 100644 index 000000000..cdb4c1002 --- /dev/null +++ b/docs/changelog.md @@ -0,0 +1,182 @@ +# Changelog + +## 7.11.3 + +`2020-11-25` + +- fix: ping left right in rtl. [#556](https://github.com/react-component/table/pull/556) + +--- + +Middle check in [releases](https://github.com/react-component/table/releases). + +--- + +## 6.9.0 / 2019-10-18 + +- Rewrite in typescript +- Fix `scroll={{ x: 'max-content' }}` not working. + +## 6.8.0 / 2019-09-03 + +- Add `tableLayout`, could be set to `fixed`: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout +- Add `column.ellipsis` to ellipsize cell content. + +## 6.7.0 / 2019-07-22 + +- Show icon if using `expandIcon` even if `expandRowByClick` is set + +## 6.6.0 / 2019-06-04 + +- Fixed Table header extra vertial scrollbar style. + +## 6.5.0 / 2019-04-20 + +- Add internal interface for col definition. + +## 6.4.0 / 2018-10-15 + +- Render data- and aria- props [#227](https://github.com/react-component/table/pull/227) +- onCell add row index [#222](https://github.com/react-component/table/pull/222) +- Add expandIcon [#236](https://github.com/react-component/table/pull/236) + +## 6.3.1 / 2018-08-02 + +- Revert [112346](https://github.com/react-component/table/commit/112346ca75e8057771cf70fc8fde4bf5f63ce2e8) since too many edge cases. + +## 6.3.0 / 2018-08-02 + +- Fixed header will read cell width from body. + +## 6.2.0 / 2018-05-09 + +- Add `expanded` as the fourth parameter to `expandedRowRender`. + +## 6.0.0 / 2017-11-14 + +- Refactor. +- Allow override default examples. +- Add Table[onRow] and column[onCell]. +- Add column[align]. + +## 5.6.0 / 2017-08-27 + +- Better empty data style for fixed-columns Table. + +## 5.5.0 / 2017-08-17 + +- Add `onRowContextMenu` + +## 5.4.0 / 2017-05-23 + +- Add `onRowMouseEnter`, `onRowMouseLeave`. + +## 5.3.0 / 2017-04-06 + +- `emptyText` support React.Node + +## 5.0.0 / 2016-09-07 + +- Remove props `columnsPageSize` and `columnsPageRange`, use fixed columns instead. +- Add prop `onRowDoubleClick`. +- Improve perfermance when expand row. + +## 4.6.0 / 2016-08-29 + +Add prop `emptyText`. + +## 4.5.3 / 2016-08-24 + +[#76](https://github.com/react-component/table/pull/76) + +## 4.5.2 / 2016-08-23 + +Add `indent` as third argument to `rowClassName` `rowRef` `expandRowClassName`。 + +## 4.5.1 / 2016-08-19 + +Add original event param for `onRowClick` + +## 4.5.0 / 2016-08-17 + +Add `expandRowByClicky` prop, allow expanding the row by clicking it. + +## 4.4.7 / 2016-08-16 + +Fix https://github.com/ant-design/ant-design/issues/2729 + +## 4.4.6 / 2016-08-05 + +Fix https://github.com/ant-design/ant-design/issues/2625 + +## 4.4.2 / 2016-08-01 + +- Improve row and cell render perfermance. + +## 4.4.1 / 2016-07-24 + +- Fix row expand of key 0 record. (ant-design/ant-design#2471) + +## 4.4.0 / 2016-07-19 + +- Add `title` prop [demo](http://react-component.github.io/table/examples/title-and-footer.html) +- Add `getBodyWrapper` prop [demo](http://react-component.github.io/table/examples/animation.html) +- Use `maxHeight` for fixed-header Table [#65](https://github.com/react-component/table/issues/65) + +## 4.3.0 / 2016-06-20 + +- support `rowKey="uid"` + +## 4.2.0 / 2016-06-16 + +- Header can be scroll in fixed-columns Table + +## 4.1.0 / 2016-06-01 + +- Support nested string of `dataIndex` +- Fix fixed Table with expand row + +## 4.0.0 / 2016-04-18 + +- Support fixed columns +- Add `scroll` prop +- Add `defaultExpandAllRows` prop +- Add `onExpand` prop +- Add `rowRef` prop + +## 3.11.0 / 2016-02-25 + +- Add prop `showHeader` +- support render footer via `footer={() =>
xxx
}` + +## 3.10.0 / 2016-02-22 + +- Add prop expandIconColumnIndex + +## 3.9.0 / 2016-01-19 + +- support pinned and paging columns. + +## 3.8.0 + +- Add `onRowClick` + +## 3.7.0 + +- Add `childenIndent` + +## 3.6.0 / 2015-11-11 + +- add defaultExpandedRowKeys/expandedRowKeys/onExpandedRowsChange prop + +## 3.5.0 / 2015-11-03 + +- Add colSpan and rowSpan support + +## 3.3.0 / 2015-10-27 + +- support react 0.14 + +## 3.2.0 / 2015-09-09 + +- add expandIconAsCell prop diff --git a/docs/demo/animation.md b/docs/demo/animation.md new file mode 100644 index 000000000..66f414a64 --- /dev/null +++ b/docs/demo/animation.md @@ -0,0 +1,3 @@ +## animation + + diff --git a/docs/demo/childrenIndent.md b/docs/demo/childrenIndent.md new file mode 100644 index 000000000..dc04fd20d --- /dev/null +++ b/docs/demo/childrenIndent.md @@ -0,0 +1,3 @@ +## childrenIndent + + diff --git a/docs/demo/className.md b/docs/demo/className.md new file mode 100644 index 000000000..d495e2f92 --- /dev/null +++ b/docs/demo/className.md @@ -0,0 +1,3 @@ +## className + + diff --git a/docs/demo/colspan-rowspan.md b/docs/demo/colspan-rowspan.md new file mode 100644 index 000000000..5814b497e --- /dev/null +++ b/docs/demo/colspan-rowspan.md @@ -0,0 +1,3 @@ +## colspan-rowspan + + diff --git a/docs/demo/column-resize.md b/docs/demo/column-resize.md new file mode 100644 index 000000000..181a04c24 --- /dev/null +++ b/docs/demo/column-resize.md @@ -0,0 +1,3 @@ +## column-resize + + diff --git a/docs/demo/dropdown.md b/docs/demo/dropdown.md new file mode 100644 index 000000000..33d3beaee --- /dev/null +++ b/docs/demo/dropdown.md @@ -0,0 +1,3 @@ +## dropdown + + diff --git a/docs/demo/ellipsis-custom-tooltip.md b/docs/demo/ellipsis-custom-tooltip.md new file mode 100644 index 000000000..8554c3bf7 --- /dev/null +++ b/docs/demo/ellipsis-custom-tooltip.md @@ -0,0 +1,3 @@ +## ellipsis-custom-tooltip + + diff --git a/docs/demo/ellipsis.md b/docs/demo/ellipsis.md new file mode 100644 index 000000000..63ce1ff46 --- /dev/null +++ b/docs/demo/ellipsis.md @@ -0,0 +1,3 @@ +## ellipsis + + diff --git a/docs/demo/expandIcon.md b/docs/demo/expandIcon.md new file mode 100644 index 000000000..1355de39f --- /dev/null +++ b/docs/demo/expandIcon.md @@ -0,0 +1,3 @@ +## expandIcon + + diff --git a/docs/demo/expandedRowRender.md b/docs/demo/expandedRowRender.md new file mode 100644 index 000000000..92904ae5e --- /dev/null +++ b/docs/demo/expandedRowRender.md @@ -0,0 +1,3 @@ +## expandedRowRender + + diff --git a/docs/demo/fixedColumns-auto-height.md b/docs/demo/fixedColumns-auto-height.md new file mode 100644 index 000000000..4c474f678 --- /dev/null +++ b/docs/demo/fixedColumns-auto-height.md @@ -0,0 +1,3 @@ +## fixedColumns-auto-height + + diff --git a/docs/demo/fixedColumns.md b/docs/demo/fixedColumns.md new file mode 100644 index 000000000..f29a7dcdb --- /dev/null +++ b/docs/demo/fixedColumns.md @@ -0,0 +1,3 @@ +## fixedColumns + + diff --git a/docs/demo/fixedColumnsAndHeader.md b/docs/demo/fixedColumnsAndHeader.md new file mode 100644 index 000000000..76656d9e5 --- /dev/null +++ b/docs/demo/fixedColumnsAndHeader.md @@ -0,0 +1,3 @@ +## fixedColumnsAndHeader + + diff --git a/docs/demo/fixedColumnsAndHeaderRtl.md b/docs/demo/fixedColumnsAndHeaderRtl.md new file mode 100644 index 000000000..8ea2f344f --- /dev/null +++ b/docs/demo/fixedColumnsAndHeaderRtl.md @@ -0,0 +1,3 @@ +## fixedColumnsAndHeaderRtl + + diff --git a/docs/demo/grouping-columns.md b/docs/demo/grouping-columns.md new file mode 100644 index 000000000..b16c2f0fd --- /dev/null +++ b/docs/demo/grouping-columns.md @@ -0,0 +1,3 @@ +## grouping-columns + + diff --git a/docs/demo/hide-header.md b/docs/demo/hide-header.md new file mode 100644 index 000000000..ac3547b86 --- /dev/null +++ b/docs/demo/hide-header.md @@ -0,0 +1,3 @@ +## hide-header + + diff --git a/docs/demo/jsx.md b/docs/demo/jsx.md new file mode 100644 index 000000000..86ed0eabc --- /dev/null +++ b/docs/demo/jsx.md @@ -0,0 +1,3 @@ +## jsx + + diff --git a/docs/demo/key.md b/docs/demo/key.md new file mode 100644 index 000000000..3e47c0565 --- /dev/null +++ b/docs/demo/key.md @@ -0,0 +1,3 @@ +## key + + diff --git a/docs/demo/nested.md b/docs/demo/nested.md new file mode 100644 index 000000000..79d6e8eec --- /dev/null +++ b/docs/demo/nested.md @@ -0,0 +1,3 @@ +## nested + + diff --git a/docs/demo/no-data.md b/docs/demo/no-data.md new file mode 100644 index 000000000..8704a2863 --- /dev/null +++ b/docs/demo/no-data.md @@ -0,0 +1,3 @@ +## no-data + + diff --git a/docs/demo/react-dnd.md b/docs/demo/react-dnd.md new file mode 100644 index 000000000..4ed1804d0 --- /dev/null +++ b/docs/demo/react-dnd.md @@ -0,0 +1,3 @@ +## react-dnd + + diff --git a/docs/demo/rowAndCellClick.md b/docs/demo/rowAndCellClick.md new file mode 100644 index 000000000..834a66cb3 --- /dev/null +++ b/docs/demo/rowAndCellClick.md @@ -0,0 +1,3 @@ +## rowAndCellClick + + diff --git a/docs/demo/scrollX.md b/docs/demo/scrollX.md new file mode 100644 index 000000000..e823ad24e --- /dev/null +++ b/docs/demo/scrollX.md @@ -0,0 +1,3 @@ +## scrollX + + diff --git a/docs/demo/scrollXY.md b/docs/demo/scrollXY.md new file mode 100644 index 000000000..74fef71a3 --- /dev/null +++ b/docs/demo/scrollXY.md @@ -0,0 +1,3 @@ +## scrollXY + + diff --git a/docs/demo/scrollY.md b/docs/demo/scrollY.md new file mode 100644 index 000000000..f66ace137 --- /dev/null +++ b/docs/demo/scrollY.md @@ -0,0 +1,3 @@ +## scrollY + + diff --git a/docs/demo/simple.md b/docs/demo/simple.md new file mode 100644 index 000000000..efaf04c4e --- /dev/null +++ b/docs/demo/simple.md @@ -0,0 +1,3 @@ +## simple + + diff --git a/docs/demo/stickyHeader.md b/docs/demo/stickyHeader.md new file mode 100644 index 000000000..b7839176b --- /dev/null +++ b/docs/demo/stickyHeader.md @@ -0,0 +1,3 @@ +## stickyHeader + + diff --git a/docs/demo/styled-components.md b/docs/demo/styled-components.md new file mode 100644 index 000000000..4cfd3410a --- /dev/null +++ b/docs/demo/styled-components.md @@ -0,0 +1,3 @@ +## styled-components + + diff --git a/docs/demo/subTable.md b/docs/demo/subTable.md new file mode 100644 index 000000000..1efbe8a61 --- /dev/null +++ b/docs/demo/subTable.md @@ -0,0 +1,3 @@ +## subTable + + diff --git a/docs/demo/title-and-footer.md b/docs/demo/title-and-footer.md new file mode 100644 index 000000000..36de38329 --- /dev/null +++ b/docs/demo/title-and-footer.md @@ -0,0 +1,3 @@ +## title-and-footer + + diff --git a/docs/demo/virtual-list-grid.md b/docs/demo/virtual-list-grid.md new file mode 100644 index 000000000..1b2bffb0c --- /dev/null +++ b/docs/demo/virtual-list-grid.md @@ -0,0 +1,3 @@ +## virtual-list-grid + + diff --git a/docs/demo/virtual-list.md b/docs/demo/virtual-list.md new file mode 100644 index 000000000..54e8348c0 --- /dev/null +++ b/docs/demo/virtual-list.md @@ -0,0 +1,3 @@ +## virtual-list + + diff --git a/examples/animation.less b/docs/examples/animation.less similarity index 100% rename from examples/animation.less rename to docs/examples/animation.less diff --git a/examples/animation.tsx b/docs/examples/animation.tsx similarity index 97% rename from examples/animation.tsx rename to docs/examples/animation.tsx index 1448723ad..56da44298 100644 --- a/examples/animation.tsx +++ b/docs/examples/animation.tsx @@ -2,8 +2,8 @@ import React from 'react'; import CSSMotionList from 'rc-animate/lib/CSSMotionList'; import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; import './animation.less'; type MotionBodyProps = React.HTMLAttributes; diff --git a/examples/childrenIndent.tsx b/docs/examples/childrenIndent.tsx similarity index 97% rename from examples/childrenIndent.tsx rename to docs/examples/childrenIndent.tsx index 78afe71d7..ddc2c1b89 100644 --- a/examples/childrenIndent.tsx +++ b/docs/examples/childrenIndent.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; interface RecordType { key: React.Key; diff --git a/examples/className.tsx b/docs/examples/className.tsx similarity index 93% rename from examples/className.tsx rename to docs/examples/className.tsx index 399f0903d..48de2363d 100644 --- a/examples/className.tsx +++ b/docs/examples/className.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const columns = [ { diff --git a/examples/colspan-rowspan.tsx b/docs/examples/colspan-rowspan.tsx similarity index 96% rename from examples/colspan-rowspan.tsx rename to docs/examples/colspan-rowspan.tsx index 6b87dd707..d2569bf9f 100644 --- a/examples/colspan-rowspan.tsx +++ b/docs/examples/colspan-rowspan.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; -import { ColumnsType, RenderedCell } from '../src/interface'; +import Table from 'rc-table'; +import '../../assets/index.less'; +import { ColumnsType, RenderedCell } from '@/interface'; interface RecordType { a?: string; diff --git a/examples/column-resize.tsx b/docs/examples/column-resize.tsx similarity index 94% rename from examples/column-resize.tsx rename to docs/examples/column-resize.tsx index 75d4e3de8..06db4f8ce 100644 --- a/examples/column-resize.tsx +++ b/docs/examples/column-resize.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Resizable } from 'react-resizable'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; import 'react-resizable/css/styles.css'; -import { ColumnType } from '../src/interface'; +import { ColumnType } from '@/interface'; const ResizableTitle = props => { const { onResize, width, ...restProps } = props; diff --git a/examples/dropdown.tsx b/docs/examples/dropdown.tsx similarity index 97% rename from examples/dropdown.tsx rename to docs/examples/dropdown.tsx index 1199b61f1..4cb3990cf 100644 --- a/examples/dropdown.tsx +++ b/docs/examples/dropdown.tsx @@ -3,8 +3,8 @@ import Menu, { Item, Divider } from 'rc-menu'; import DropDown from 'rc-dropdown'; import 'rc-dropdown/assets/index.css'; import 'rc-menu/assets/index.css'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const data = []; for (let i = 0; i < 10; i += 1) { diff --git a/examples/ellipsis-custom-tooltip.tsx b/docs/examples/ellipsis-custom-tooltip.tsx similarity index 96% rename from examples/ellipsis-custom-tooltip.tsx rename to docs/examples/ellipsis-custom-tooltip.tsx index 5241352d7..a6101b641 100644 --- a/examples/ellipsis-custom-tooltip.tsx +++ b/docs/examples/ellipsis-custom-tooltip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Tooltip from 'rc-tooltip'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; import 'rc-tooltip/assets/bootstrap.css'; const createColumns = (length: number) => { diff --git a/examples/ellipsis.tsx b/docs/examples/ellipsis.tsx similarity index 96% rename from examples/ellipsis.tsx rename to docs/examples/ellipsis.tsx index 30077b328..1b099534c 100644 --- a/examples/ellipsis.tsx +++ b/docs/examples/ellipsis.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const columns = [ { title: 'name', dataIndex: 'name', width: 100, ellipsis: true }, diff --git a/examples/expandIcon.tsx b/docs/examples/expandIcon.tsx similarity index 94% rename from examples/expandIcon.tsx rename to docs/examples/expandIcon.tsx index 955f232d9..981eaba9d 100644 --- a/examples/expandIcon.tsx +++ b/docs/examples/expandIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const data = [ { key: 0, a: '123' }, diff --git a/examples/expandedRowRender.tsx b/docs/examples/expandedRowRender.tsx similarity index 97% rename from examples/expandedRowRender.tsx rename to docs/examples/expandedRowRender.tsx index 14452bf7b..585fd3553 100644 --- a/examples/expandedRowRender.tsx +++ b/docs/examples/expandedRowRender.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; import { useCheckbox } from './utils/useInput'; -import { ColumnsType } from '../src/interface'; +import { ColumnsType } from '@/interface'; interface RecordType { key: React.Key; diff --git a/examples/fixedColumns-auto-height.tsx b/docs/examples/fixedColumns-auto-height.tsx similarity index 94% rename from examples/fixedColumns-auto-height.tsx rename to docs/examples/fixedColumns-auto-height.tsx index 83d103520..9fbe79648 100644 --- a/examples/fixedColumns-auto-height.tsx +++ b/docs/examples/fixedColumns-auto-height.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; -import { ColumnType } from '../src/interface'; +import Table from 'rc-table'; +import '../../assets/index.less'; +import { ColumnType } from '@/interface'; interface RecordType { a: string; diff --git a/examples/fixedColumns.tsx b/docs/examples/fixedColumns.tsx similarity index 95% rename from examples/fixedColumns.tsx rename to docs/examples/fixedColumns.tsx index d16faa21b..d65281c28 100644 --- a/examples/fixedColumns.tsx +++ b/docs/examples/fixedColumns.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; -import { ColumnType } from '../src/interface'; +import Table from 'rc-table'; +import '../../assets/index.less'; +import { ColumnType } from '@/interface'; interface RecordType { a: string; diff --git a/examples/fixedColumnsAndHeader.tsx b/docs/examples/fixedColumnsAndHeader.tsx similarity index 97% rename from examples/fixedColumnsAndHeader.tsx rename to docs/examples/fixedColumnsAndHeader.tsx index 29b6db4f8..4b79ba878 100644 --- a/examples/fixedColumnsAndHeader.tsx +++ b/docs/examples/fixedColumnsAndHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; -import { ColumnsType } from '../src/interface'; +import Table from 'rc-table'; +import '../../assets/index.less'; +import { ColumnsType } from '@/interface'; import { useCheckbox } from './utils/useInput'; interface RecordType { diff --git a/examples/fixedColumnsAndHeaderRtl.tsx b/docs/examples/fixedColumnsAndHeaderRtl.tsx similarity index 97% rename from examples/fixedColumnsAndHeaderRtl.tsx rename to docs/examples/fixedColumnsAndHeaderRtl.tsx index 16ceb0e74..13f87219d 100644 --- a/examples/fixedColumnsAndHeaderRtl.tsx +++ b/docs/examples/fixedColumnsAndHeaderRtl.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; -import { ColumnsType } from '../src/interface'; +import Table from 'rc-table'; +import '../../assets/index.less'; +import { ColumnsType } from '@/interface'; import { useCheckbox } from './utils/useInput'; interface RecordType { diff --git a/examples/grouping-columns.tsx b/docs/examples/grouping-columns.tsx similarity index 96% rename from examples/grouping-columns.tsx rename to docs/examples/grouping-columns.tsx index 5c0d2159b..62a4a8ea4 100644 --- a/examples/grouping-columns.tsx +++ b/docs/examples/grouping-columns.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const columns = [ { diff --git a/examples/hide-header.tsx b/docs/examples/hide-header.tsx similarity index 91% rename from examples/hide-header.tsx rename to docs/examples/hide-header.tsx index f56f6d852..c61dc59e3 100644 --- a/examples/hide-header.tsx +++ b/docs/examples/hide-header.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const columns = [ { title: 'title1', dataIndex: 'a', key: 'a', width: 100 }, diff --git a/examples/jsx.tsx b/docs/examples/jsx.tsx similarity index 92% rename from examples/jsx.tsx rename to docs/examples/jsx.tsx index a144d35f7..77b967594 100644 --- a/examples/jsx.tsx +++ b/docs/examples/jsx.tsx @@ -1,7 +1,7 @@ /* eslint-disable import/no-named-as-default-member */ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const { ColumnGroup, Column } = Table; diff --git a/examples/key.tsx b/docs/examples/key.tsx similarity index 96% rename from examples/key.tsx rename to docs/examples/key.tsx index a3d4ad75d..88e30e9cf 100644 --- a/examples/key.tsx +++ b/docs/examples/key.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Table from '../src'; -import '../assets/index.less'; +import Table from 'rc-table'; +import '../../assets/index.less'; const CheckBox = ({ id }) => (
, mountNode); +``` + +## API + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| tableLayout | `auto` \| `fixed` | `auto` \| `fixed` for any columns is fixed or ellipsis or header is fixed | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout | +| prefixCls | String | rc-table | | +| className | String | | additional className | +| id | String | | identifier of the container div | +| useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns | +| scroll | Object | {x: false, y: false} | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | +| expandable | Object | | Config expand props | +| expandable.defaultExpandAllRows | Boolean | false | Expand All Rows initially | +| expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys | +| expandable.expandedRowKeys | String[] | | current expanded rows keys | +| expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row | +| expandable.expandedRowClassName | Function(recode, index, indent):string | | get expanded row's className | +| expandable.expandRowByClick | boolean | | Support expand by click row | +| expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false | +| expandable.expandIcon | props => ReactNode | | Customize expand icon | +| expandable.indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified | +| expandable.rowExpandable | (record) => boolean | | Config row support expandable | +| expandable.onExpand | Function(expanded, record) | | function to call when click expand icon | +| expandable.onExpandedRowsChange | Function(expandedRows) | | function to call when the expanded rows change | +| rowKey | string or Function(record):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record)` will be use as key. | +| rowClassName | string or Function(record, index, indent):string | | get row's className | +| rowRef | Function(record, index, indent):string | | get row's ref key | +| data | Object[] | | data record array to be rendered | +| onRow | Function(record, index) | | Set custom props per each row. | +| onHeaderRow | Function(record, index) | | Set custom props per each header row. | +| showHeader | Boolean | true | whether table head is shown | +| title | Function(currentData) | | table title render function | +| footer | Function(currentData) | | table footer render function | +| emptyText | React.Node or Function | `No Data` | Display text when data is empty | +| columns | Object[] | | The columns config of table, see table below | +| components | Object | | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details | +| sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar | + +## Column Props + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| key | String | | key of this column | +| className | String | | className of this column | +| colSpan | Number | | thead colSpan of this column | +| title | React Node | | title of this column | +| dataIndex | String | | display field of the data record | +| width | String \| Number | | width of the specific proportion calculation according to the width of the columns | +| fixed | String \| Boolean | | this column will be fixed when table scroll horizontally: true or 'left' or 'right' | +| align | String | | specify how cell content is aligned | +| ellipsis | Boolean | | specify whether cell content be ellipsized | +| onCell | Function(record, index) | | Set custom props per each cell. | +| onHeaderCell | Function(record) | | Set custom props per each header cell. | +| render | Function(value, row, index) | | The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan | + +## License + +rc-table is released under the MIT license. diff --git a/now.json b/now.json index 6c94384f5..c1deaee89 100644 --- a/now.json +++ b/now.json @@ -7,5 +7,8 @@ "use": "@now/static-build", "config": { "distDir": ".doc" } } + ], + "routes": [ + { "src": "/(.*)", "dest": "/dist/$1" } ] } diff --git a/package.json b/package.json index 95c976c15..3c281519d 100644 --- a/package.json +++ b/package.json @@ -35,16 +35,18 @@ }, "license": "MIT", "scripts": { - "start": "cross-env NODE_ENV=development father doc dev --storybook", - "build": "father doc build --storybook", - "compile": "father build && lessc assets/index.less assets/index.css", - "gh-pages": "npm run build && father doc deploy", - "prepublishOnly": "npm run compile && np --yolo --no-publish", - "postpublish": "npm run gh-pages", - "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", - "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", + "start": "dumi dev", + "docs:build": "dumi build", + "docs:deploy": "gh-pages -d docs-dist", + "compile": "father-build", + "deploy": "npm run docs:build && npm run docs:deploy", + "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"", "test": "father test", - "coverage": "father test --coverage" + "coverage": "father test --coverage", + "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "lint": "eslint src/ --ext .tsx,.ts", + "lint:tsc": "tsc -p tsconfig.json --noEmit", + "now-build": "npm run docs:build" }, "peerDependencies": { "react": ">=16.9.0", @@ -65,11 +67,15 @@ "@types/react-dom": "^16.9.0", "@umijs/fabric": "^2.0.0", "cross-env": "^7.0.0", + "dumi": "^1.0.37", "enzyme": "^3.1.0", "enzyme-adapter-react-16": "^1.0.1", "enzyme-to-json": "^3.1.2", "eslint": "^7.1.0", "father": "^2.22.0", + "father-build": "^1.18.6", + "gh-pages": "^3.1.0", + "glob": "^7.1.6", "immutability-helper": "^3.0.0", "less": "^3.10.3", "np": "^6.0.0", diff --git a/script/update-content.js b/script/update-content.js new file mode 100644 index 000000000..c898f9e37 --- /dev/null +++ b/script/update-content.js @@ -0,0 +1,29 @@ +/* + 用于 dumi 改造使用， + 可用于将 examples 的文件批量修改为 demo 引入形式， + 其他项目根据具体情况使用。 +*/ + +const fs = require('fs'); +const glob = require('glob'); + +const paths = glob.sync('./docs/examples/*.tsx'); + +paths.forEach(path => { + const name = path.split('/').pop().split('.')[0]; + fs.writeFile( + `./docs/demo/${name}.md`, + `## ${name} + + +`, + 'utf8', + function(error) { + if(error){ + console.log(error); + return false; + } + console.log(`${name} 更新成功~`); + } + ) +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..35ec7c4a3 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "esnext", + "moduleResolution": "node", + "baseUrl": "./", + "jsx": "preserve", + "declaration": true, + "skipLibCheck": true, + "esModuleInterop": true, + "paths": { + "@/*": ["src/*"], + "@@/*": ["src/.umi/*"], + "rc-table": ["src/index.ts"] + } + } +} diff --git a/typings.d.ts b/typings.d.ts new file mode 100644 index 000000000..71e0e9f4c --- /dev/null +++ b/typings.d.ts @@ -0,0 +1,2 @@ +declare module '*.css'; +declare module '*.less';