├── .babelrc ├── .dumi ├── pages │ ├── index.less │ └── index.tsx └── theme │ └── slots │ └── Sidebar │ ├── index.less │ └── index.tsx ├── .dumirc.ts ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── pull_request_template.md └── workflows │ └── code-review.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .lintstagedrc ├── .stylelintrc.js ├── CONTRIBUTORS.md ├── Contact.md ├── DEVELOP.md ├── DEVELOP.zh-CN.md ├── LICENSE ├── README.md ├── README.zh-CN.md ├── bin ├── gitlint.sh ├── includes │ └── env.sh └── tslint.sh ├── commitlint.config.js ├── docs-static ├── .gitkeep └── assets │ ├── bulma │ └── index.min.css │ ├── global.css │ └── prismjs │ ├── index.min.css │ └── index.min.js ├── docs ├── demo-data.ts ├── demo.md ├── drip-table-generator │ ├── changelog.md │ ├── components │ │ ├── cdn-link.md │ │ ├── group.md │ │ ├── index.md │ │ ├── lowcode.md │ │ └── rich-text.md │ ├── demo │ │ ├── component-settings.ts │ │ ├── custom-component.tsx │ │ ├── custom-global-settings.ts │ │ ├── demo.module.less │ │ ├── demo.tsx │ │ ├── index.md │ │ └── text-component.tsx │ ├── faq.md │ ├── index.md │ ├── props │ │ ├── custom-attribute-components.md │ │ ├── custom-column-add-panel.md │ │ ├── custom-component-panel.md │ │ ├── custom-global-config-panel.md │ │ ├── custom-templates.md │ │ ├── custom-theme-options.md │ │ ├── data-fields.md │ │ ├── draggable.md │ │ ├── height.md │ │ ├── index.md │ │ ├── mock-data-source.md │ │ ├── mode.md │ │ ├── no-data-feedback.md │ │ ├── on-click.md │ │ ├── on-column-item-changed.md │ │ ├── on-datasource-change.md │ │ ├── on-export-schema.md │ │ ├── on-save.md │ │ ├── save.md │ │ ├── show-component-layout.md │ │ ├── show-template.md │ │ ├── show-tool-layout.md │ │ ├── show-toolbar.md │ │ ├── slots-schema.md │ │ └── width.md │ ├── quick-start.md │ └── tutorial │ │ ├── api.md │ │ ├── custom-theme.md │ │ ├── custom.md │ │ ├── data-source.md │ │ ├── header.md │ │ ├── index.md │ │ ├── refs.md │ │ ├── table-props.md │ │ ├── title.md │ │ └── usage-pro.md ├── drip-table │ ├── api │ │ ├── display-column-keys.md │ │ ├── index.md │ │ ├── set-display-column-keys.md │ │ ├── set-sorter.md │ │ └── sorter.md │ ├── basic-demo.md │ ├── changelog.md │ ├── components │ │ ├── button.md │ │ ├── checkbox.md │ │ ├── date-picker.md │ │ ├── group.md │ │ ├── icon.md │ │ ├── image.md │ │ ├── index.md │ │ ├── input-number.md │ │ ├── link.md │ │ ├── pop-up-page.md │ │ ├── popover.md │ │ ├── select.md │ │ ├── status.md │ │ ├── switch.md │ │ ├── tag.md │ │ └── text.md │ ├── demo │ │ ├── custom-components │ │ │ ├── event.ts │ │ │ ├── index.ts │ │ │ └── sample.tsx │ │ ├── demo.module.less │ │ ├── demo.tsx │ │ └── index.md │ ├── faq.md │ ├── index.md │ ├── layout │ │ ├── card-layout.md │ │ └── index.md │ ├── migration │ │ ├── index.md │ │ └── v2-v3.md │ ├── props │ │ ├── ajv.md │ │ ├── class-name.md │ │ ├── component-did-mount.md │ │ ├── component-did-update.md │ │ ├── component-will-unmount.md │ │ ├── components.md │ │ ├── create-evaluator.md │ │ ├── current-page.md │ │ ├── data-source.md │ │ ├── default-component-lib.md │ │ ├── default-expand-all-rows.md │ │ ├── default-expanded-row-keys.md │ │ ├── display-column-keys.md │ │ ├── empty-text.md │ │ ├── expanded-row-render.md │ │ ├── ext.md │ │ ├── footer.md │ │ ├── index.md │ │ ├── loading.md │ │ ├── on-change.md │ │ ├── on-display-column-keys-change.md │ │ ├── on-event.md │ │ ├── on-filter-change.md │ │ ├── on-insert-button-click.md │ │ ├── on-page-change.md │ │ ├── on-pagination-change.md │ │ ├── on-row-click.md │ │ ├── on-row-collapse.md │ │ ├── on-row-double-click.md │ │ ├── on-row-expand.md │ │ ├── on-search.md │ │ ├── on-selection-change.md │ │ ├── on-sorter-change.md │ │ ├── ref.md │ │ ├── ref.tsx │ │ ├── render-header-cell-filter.md │ │ ├── render-pagination.md │ │ ├── render-selection.md │ │ ├── row-expandable.md │ │ ├── row-footer-visible.md │ │ ├── row-header-visible.md │ │ ├── row-selectable.md │ │ ├── schema-function-preprocessor.md │ │ ├── schema.md │ │ ├── selected-row-keys.md │ │ ├── slots.md │ │ ├── sticky.md │ │ ├── style.md │ │ ├── subtable-footer.md │ │ ├── subtable-props.md │ │ ├── subtable-title.md │ │ ├── title.md │ │ └── total.md │ ├── quick-start.md │ ├── schema │ │ ├── border-radius.md │ │ ├── bordered.md │ │ ├── class-name.md │ │ ├── columns │ │ │ ├── align.md │ │ │ ├── children.md │ │ │ ├── column-hover-style.md │ │ │ ├── component.md │ │ │ ├── data-index.md │ │ │ ├── data-translation.md │ │ │ ├── default-filtered-value.md │ │ │ ├── default-value.md │ │ │ ├── description.md │ │ │ ├── disable.md │ │ │ ├── editable.md │ │ │ ├── filters-max-select.md │ │ │ ├── filters.md │ │ │ ├── fixed.md │ │ │ ├── hidable.md │ │ │ ├── hidden.md │ │ │ ├── hover-style.md │ │ │ ├── index.md │ │ │ ├── key.md │ │ │ ├── options.md │ │ │ ├── row-hover-style.md │ │ │ ├── sort-directions.md │ │ │ ├── sorter.md │ │ │ ├── style.md │ │ │ ├── title.md │ │ │ ├── vertical-align.md │ │ │ └── width.md │ │ ├── editable.md │ │ ├── empty-text.md │ │ ├── footer.md │ │ ├── header.md │ │ ├── id.md │ │ ├── index.md │ │ ├── initial-sorter.md │ │ ├── inner-class-name.md │ │ ├── inner-style.md │ │ ├── pagination.md │ │ ├── row-draggable.md │ │ ├── row-footer.md │ │ ├── row-header.md │ │ ├── row-height.md │ │ ├── row-key.md │ │ ├── row-selection.md │ │ ├── row-slot-key.md │ │ ├── scroll.md │ │ ├── show-header.md │ │ ├── size.md │ │ ├── span.md │ │ ├── sticky.md │ │ ├── stripe.md │ │ ├── style.md │ │ ├── subtable.md │ │ ├── table-cell-style.md │ │ ├── table-layout.md │ │ ├── theme.md │ │ └── virtual.md │ ├── slot │ │ ├── elements.md │ │ ├── index.md │ │ └── style.md │ └── types │ │ ├── column-schema.md │ │ ├── index.md │ │ ├── slot-schema.md │ │ └── table-information.md ├── jsoneditor-react.d.ts └── shims-styles.d.ts ├── lerna.json ├── package.json ├── packages ├── drip-table-generator │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .fatherrc.ts │ ├── .gitignore │ ├── .stylelintrc.js │ ├── DEVELOP.md │ ├── DEVELOP.zh-CN.md │ ├── README.md │ ├── README.zh-CN.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── CustomForm │ │ │ │ ├── components │ │ │ │ │ ├── array-list │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── auto-complete │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── box-shadow │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── cascade │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── checkbox │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── code-editor │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── color-picker │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── data-translation │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── input │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── number │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── radio │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── rich-text-editor │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── select │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── style-numbers │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── switch │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── text │ │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── Draggable │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── Highlight │ │ │ │ └── index.tsx │ │ │ ├── Icon │ │ │ │ └── index.tsx │ │ │ └── RichText │ │ │ │ └── index.tsx │ │ ├── context │ │ │ ├── index.ts │ │ │ └── table-configs.ts │ │ ├── index.ts │ │ ├── layouts │ │ │ ├── attributes-layout │ │ │ │ ├── component-configs │ │ │ │ │ └── index.tsx │ │ │ │ ├── component-item-config │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── global-configs │ │ │ │ │ ├── configs.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.less │ │ │ │ ├── index.tsx │ │ │ │ └── utils.ts │ │ │ ├── index.less │ │ │ ├── index.tsx │ │ │ ├── table-workstation │ │ │ │ ├── components │ │ │ │ │ ├── pagination │ │ │ │ │ │ ├── dom.ts │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── table-container │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ ├── editable-footer │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── editable-header │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── editable-table │ │ │ │ │ ├── components │ │ │ │ │ │ ├── add-column │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── cell │ │ │ │ │ │ │ ├── cell.tsx │ │ │ │ │ │ │ ├── common.tsx │ │ │ │ │ │ │ ├── group.tsx │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── popover.tsx │ │ │ │ │ │ ├── column-header │ │ │ │ │ │ │ ├── filter.tsx │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── components-selector │ │ │ │ │ │ │ ├── configs.ts │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── selector │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── header-list │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── left-columns │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── right-columns │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── row │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ │ └── row-header │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ ├── scroll-columns │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ └── table-section │ │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.less │ │ │ │ ├── index.tsx │ │ │ │ └── table-preview │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ ├── toolbar │ │ │ │ ├── components │ │ │ │ │ ├── corner │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── datasource │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── dropdown-button │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── export-schema │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── import-schema │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── templates-manager │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.less │ │ │ │ ├── index.tsx │ │ │ │ └── templates │ │ │ │ │ ├── basic-table.ts │ │ │ │ │ ├── editable-table.ts │ │ │ │ │ ├── group-table.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── pro-table.ts │ │ │ │ │ └── sub-table.ts │ │ │ └── utils.ts │ │ ├── shims-styles.d.ts │ │ ├── shims-window.d.ts │ │ ├── styles │ │ │ ├── index.less │ │ │ └── theme.less │ │ ├── table-components │ │ │ ├── button.ts │ │ │ ├── checkbox.ts │ │ │ ├── configs.ts │ │ │ ├── date-picker.ts │ │ │ ├── group.ts │ │ │ ├── icon.ts │ │ │ ├── index.ts │ │ │ ├── input-number.ts │ │ │ ├── links.ts │ │ │ ├── picture.ts │ │ │ ├── pop-up-page.ts │ │ │ ├── popover.ts │ │ │ ├── render-html-remote.ts │ │ │ ├── render-html.ts │ │ │ ├── rich-text.ts │ │ │ ├── select.ts │ │ │ ├── status.ts │ │ │ ├── switch.ts │ │ │ ├── tag.ts │ │ │ └── text.ts │ │ ├── typing.ts │ │ ├── utils │ │ │ ├── enum.ts │ │ │ ├── index.ts │ │ │ └── sandbox.ts │ │ └── wrapper │ │ │ └── index.tsx │ └── tsconfig.json └── drip-table │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .fatherrc.ts │ ├── .gitignore │ ├── .stylelintrc.js │ ├── README.md │ ├── README.zh-CN.md │ ├── package.json │ ├── post-build.js │ ├── src │ ├── components │ │ ├── cell-components │ │ │ ├── button │ │ │ │ └── index.tsx │ │ │ ├── checkbox │ │ │ │ └── index.tsx │ │ │ ├── component.ts │ │ │ ├── date-picker │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── group │ │ │ │ └── index.tsx │ │ │ ├── hooks.ts │ │ │ ├── icon │ │ │ │ └── index.tsx │ │ │ ├── image │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── index.ts │ │ │ ├── input-number │ │ │ │ └── index.tsx │ │ │ ├── link │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── pop-up-page │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── popover │ │ │ │ └── index.tsx │ │ │ ├── render-html-remote │ │ │ │ └── index.tsx │ │ │ ├── render-html │ │ │ │ └── index.tsx │ │ │ ├── rich-text │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── select │ │ │ │ └── index.tsx │ │ │ ├── status │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── switch │ │ │ │ └── index.tsx │ │ │ ├── tag │ │ │ │ └── index.tsx │ │ │ ├── text │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ └── utils.ts │ │ └── react-components │ │ │ ├── alert │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── button │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── checkbox │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── col │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── date-picker │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── dropdown │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── error-boundary │ │ │ └── index.tsx │ │ │ ├── highlight │ │ │ └── index.tsx │ │ │ ├── image │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── input-number │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── input │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── menu │ │ │ ├── context.tsx │ │ │ ├── index.less │ │ │ ├── index.tsx │ │ │ └── override.tsx │ │ │ ├── modal │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── pagination │ │ │ ├── index.less │ │ │ ├── index.tsx │ │ │ └── mini-select.tsx │ │ │ ├── result │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── rich-text │ │ │ └── index.tsx │ │ │ ├── row │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── select │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── slot-render │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── spin │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── switch │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── tag │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ └── tooltip │ │ │ ├── index.less │ │ │ └── index.tsx │ ├── hooks.ts │ ├── index.ts │ ├── layouts │ │ ├── calendar │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── card │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── index.less │ │ ├── index.tsx │ │ ├── table │ │ │ ├── components │ │ │ │ └── header-cell │ │ │ │ │ ├── components │ │ │ │ │ ├── filter │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ └── sorter │ │ │ │ │ │ ├── index.less │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ ├── index.less │ │ │ ├── index.tsx │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ └── types.ts │ ├── shims-styles.d.ts │ ├── styles │ │ ├── index.less │ │ ├── mixins │ │ │ ├── disabled.less │ │ │ └── motion.less │ │ ├── motion.less │ │ ├── motion │ │ │ ├── fade.less │ │ │ ├── move.less │ │ │ ├── other.less │ │ │ ├── slide.less │ │ │ └── zoom.less │ │ └── theme │ │ │ └── default.less │ ├── types │ │ └── index.ts │ ├── utils │ │ ├── ajv.ts │ │ ├── cache.ts │ │ ├── children-like.ts │ │ ├── dom.ts │ │ ├── hooks.ts │ │ ├── json.ts │ │ ├── operator.ts │ │ └── sandbox.ts │ └── wrapper │ │ ├── index.less │ │ └── index.tsx │ └── tsconfig.json ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | "@babel/preset-typescript" 6 | ], 7 | "plugins": [ 8 | "@babel/plugin-transform-runtime", 9 | ["@babel/plugin-proposal-decorators", { "legacy": true }], 10 | ["@babel/plugin-proposal-class-properties", { "loose": true }], 11 | ["@babel/plugin-proposal-private-methods", { "loose": true }], 12 | ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], 13 | "@babel/plugin-syntax-dynamic-import" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # /node_modules/* and /bower_components/* ignored by default 2 | 3 | !.*.js 4 | !.*.ts 5 | *.min.js 6 | 7 | /docs-dist 8 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | ## code changes will send PR to following users 2 | * @JDFED/drip-table-reviewers 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - Drip-table version: 28 | - Drip-table-generator version (optional): 29 | - React version: 30 | - OS: [e.g. iOS] 31 | - Browser [e.g. chrome, safari] 32 | - Version [e.g. 22] 33 | 34 | **Smartphone (please complete the following information):** 35 | - Drip-table version: 36 | - Drip-table-generator version (optional): 37 | - React version: 38 | - Device: [e.g. iPhone6] 39 | - OS: [e.g. iOS8.1] 40 | - Browser [e.g. stock browser, safari] 41 | - Version [e.g. 22] 42 | 43 | **Additional context** 44 | Add any other context about the problem here. 45 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ## **Please check if the PR fulfills these requirements** 4 | 5 | - [ ] The commit message follows our guidelines 6 | - [ ] Tests for the changes have been added (for bug fixes/features) 7 | - [ ] Docs have been added / updated (for bug fixes / features) 8 | 9 | ## **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...) 10 | 11 | ## **What is the current behavior?** (You can also link to an **open issue** here) 12 | 13 | ## **What is the new behavior (if this is a feature change)?** 14 | 15 | ## **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?) 16 | 17 | ## **Where is the docs link?** 18 | 19 | 26 | 27 | ## **Other information (likes screenshots):** 28 | 29 | @JDFED/drip-table-reviewers 30 | -------------------------------------------------------------------------------- /.github/workflows/code-review.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Code Review CI 5 | 6 | on: 7 | push: 8 | branches: [ master ] 9 | pull_request: 10 | branches: [ master ] 11 | 12 | jobs: 13 | code-review: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [14.x, 16.x] 20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 21 | 22 | steps: 23 | - uses: actions/checkout@v3 24 | with: 25 | fetch-depth: 0 26 | - name: Use Node.js ${{ matrix.node-version }} 27 | uses: actions/setup-node@v3 28 | with: 29 | node-version: ${{ matrix.node-version }} 30 | - run: yarn 31 | - run: yarn run build 32 | - run: yarn run lint 33 | - name: Run yarn run commitlint 34 | run: | 35 | printf "%s\n\n" "$(git log --pretty=format:'%ad %h by %an, %s' -n $((${{ github.event.pull_request.commits }} + 1)))" 36 | yarn run commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | 5 | /node_modules 6 | /docs-dist 7 | /yarn-error.log 8 | 9 | # ide 10 | 11 | /.idea 12 | /.vscode 13 | 14 | # umi 15 | 16 | .umi 17 | .umi-production 18 | .umi-test 19 | .dumi/tmp 20 | .dumi/tmp-test 21 | .dumi/tmp-production 22 | .env.local 23 | 24 | # lerna 25 | 26 | /.local 27 | 28 | # dotenv 29 | 30 | /.env 31 | 32 | # temporary files 33 | 34 | /.tsconfig-lint.json 35 | /packages/\*/.tsconfig-lint.json 36 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,jsx,ts,tsx,tx,json,scss,less,css}": [ 3 | "npm run lint" 4 | ], 5 | "*": [ 6 | "npm run lint:git" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | # ✨ 贡献者 2 | 3 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Emil Zhai
🐛 💻
helloqian12138
🐛 💻
iceRao
🐛 💻
15 | 16 | 17 | 18 | 19 | 20 | 21 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 22 | -------------------------------------------------------------------------------- /Contact.md: -------------------------------------------------------------------------------- 1 | 目前 Drip table 交流主要在微信群,欢迎小伙伴们进群交流^ ^ 2 | 3 | ![Drip table 开发交流群1](https://storage.360buyimg.com/icepublic/drip-table/driptable_contact_me_qr.png) 4 | 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 JD.com, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bin/gitlint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | changed=$(git diff --cached --name-only) 4 | 5 | if [ -z "$changed" ]; then 6 | exit 0 7 | fi 8 | 9 | echo $changed | xargs egrep '^[><=]{7}( |$)' -H -I --line-number 10 | 11 | # If the egrep command has any hits - echo a warning and exit with non-zero status. 12 | if [ $? = 0 ]; then 13 | echo "WARNING: You have merge markers in the above files. Fix them before committing." 14 | echo " If these markers are intentional, you can force the commit with the --no-verify argument." 15 | exit 1 16 | fi 17 | -------------------------------------------------------------------------------- /bin/tslint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash -e 2 | __ROOT_DIR__="$(cd "$(dirname "$0" | xargs dirname)"; pwd -P)" 3 | __WORK_DIR__="$(pwd)" 4 | __TMP_DIR__="${__ROOT_DIR__}/node_modules/.tmp" 5 | 6 | mkdir -p "${__TMP_DIR__}" 7 | 8 | # includes 9 | . "${__ROOT_DIR__}/bin/includes/env.sh" 10 | 11 | # create tsc lint config file 12 | TSC_TSCONFIG_FILE="${__WORK_DIR__}/.tsconfig-lint.json" 13 | cat > "${TSC_TSCONFIG_FILE}" <> "${TSC_TSCONFIG_FILE}" 23 | done 24 | cat >> "${TSC_TSCONFIG_FILE}" < "${TSC_LOG_FILE}" 33 | ERROR_CODE="$?" 34 | TSC_ERROR=$(tail "${TSC_LOG_FILE}") 35 | rm -f "${TSC_LOG_FILE}" 36 | 37 | # remove tsc config file 38 | rm -f "${TSC_TSCONFIG_FILE}" 39 | 40 | # emit error if exists 41 | if [ "${ERROR_CODE}" != "0" ] && [ "${TSC_ERROR}" != "" ]; then 42 | echoeol 43 | echo "${RED}⛔ Typescript complier lint (tsc) checksum failed! (EXIT_CODE:${ERROR_CODE})${NOCOLOR}" 44 | echoeol 45 | echo "${TSC_ERROR}" 46 | echoeol 47 | exit 1 48 | fi 49 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional', 4 | ], 5 | rules: { 6 | 'type-enum': [2, 'always', [ 7 | 'build', 8 | 'ci', 9 | 'chore', 10 | 'docs', 11 | 'feat', 12 | 'fix', 13 | 'perf', 14 | 'refactor', 15 | 'revert', 16 | 'style', 17 | 'test', 18 | 'release', 19 | ]], 20 | 'invalid-subject-chars': [2, 'always'], 21 | }, 22 | ignores: [ 23 | message => message.startsWith('Publish\n'), 24 | ], 25 | plugins: [ 26 | { 27 | rules: { 28 | 'invalid-subject-chars': (data) => { 29 | if (typeof data.subject === 'string') { 30 | const invalidChars = data.subject.match(/[^a-zA-Z0-9,.'"\-_ /\\#():@]/gu); 31 | if (invalidChars && invalidChars.length > 0) { 32 | return [false, `Subject contains invalid characters: ${invalidChars.join('')}`]; 33 | } 34 | } 35 | return [true, null]; 36 | }, 37 | }, 38 | }, 39 | ], 40 | }; 41 | -------------------------------------------------------------------------------- /docs-static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-opensource/drip-table/00fb48d268a59cc9be6fc9a16b1cf71f79e1619f/docs-static/.gitkeep -------------------------------------------------------------------------------- /docs-static/assets/prismjs/index.min.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.25.0 2 | https://prismjs.com/download.html#themes=prism&languages=bash */ 3 | code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} 4 | -------------------------------------------------------------------------------- /docs/demo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DEMO 3 | sidemenu: false 4 | toc: false 5 | --- 6 | 7 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /docs/drip-table-generator/components/cdn-link.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CDN 链接组件 3 | toc: content 4 | --- 5 | 6 | ## CDN 链接组件 7 | 8 | **CDN 链接组件允许用户在本地开发自己的业务代码，上传至 CDN 后可以通过该组件嵌入表格中。** 9 | 10 | 示例： 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { Input } from 'antd'; 20 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 21 | import DripTableGenerator from 'drip-table-generator'; 22 | import React, { useState } from 'react'; 23 | 24 | const schema = { 25 | columns: [ 26 | { 27 | key: 'mock_1', 28 | title: 'CDN 链接组件', 29 | width: 120, 30 | align: 'center', 31 | verticalAlign: 'middle', 32 | dataIndex: '', 33 | component: 'render-html-remote', 34 | options: { 35 | url: 'https://storage.360buyimg.com/launch/drip-table/app.js', 36 | }, 37 | }, 38 | ], 39 | }; 40 | 41 | const dataSource = [ 42 | { 43 | id: 1, 44 | name: "商品一", 45 | price: 7999, 46 | status: "onSale", 47 | pictureUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png', 48 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 49 | }, 50 | ]; 51 | 52 | const Demo = () => { 53 | return ( 54 | 59 | ); 60 | }; 61 | 62 | export default Demo; 63 | ``` 64 | -------------------------------------------------------------------------------- /docs/drip-table-generator/components/lowcode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 低代码组件 3 | toc: content 4 | --- 5 | 6 | ## 低代码组件 7 | 8 | **Generator 提供了可在线编写简单代码的自定义组件，方便用户生成自己所想要的渲染 HTML** 9 | 10 | 自定义代码编写时返回一段字符串或者带 `HTML` 的字符串，`drip-table` 会将其渲染成 `HTML`。 11 | 12 | 效果图如下所示： 13 | 14 | ![image](https://img10.360buyimg.com/imagetools/jfs/t1/160874/3/32469/319065/636262f3Eb80275b9/5da677a720bbcc14.png) 15 | 16 | #### 参数 `rec` 17 | 18 | - 描述: `模板字段` 19 | - 类型: `Record` 20 | - 默认值: `null` 21 | 用于获取表格数据的一条记录，数据格式取决于用户传入的数据格式。 22 | 23 | 示例： 24 | 25 | ```js 26 | return `${rec.name}`; 27 | ``` 28 | -------------------------------------------------------------------------------- /docs/drip-table-generator/components/rich-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 富文本组件 3 | toc: content 4 | --- 5 | 6 | ## 富文本组件 7 | 8 | **通过在线富文本编辑器编辑渲染内容生成单元格组件。** 9 | 10 | 支持以双花括号的形式作为字符串模板来获取当前行数据 11 | 12 | #### 参数 `rec` 13 | 14 | - 描述: `模板字段` 15 | - 类型: `Record` 16 | - 默认值: `null` 17 | 用于获取表格数据的一条记录，数据格式取决于用户传入的数据格式。 18 | 19 | 示例： 20 | 21 | ```js 22 | return `${rec.name}`; 23 | ``` 24 | 25 | 代码示例： 26 | 27 | ```jsx 28 | /** 29 | * transform: true 30 | * defaultShowCode: true 31 | * hideActions: ["CSB"] 32 | */ 33 | 34 | import { Input } from 'antd'; 35 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 36 | import DripTableGenerator from 'drip-table-generator'; 37 | import React, { useState } from 'react'; 38 | 39 | const schema = { 40 | columns: [ 41 | { 42 | "key": "rich-text_1814cd20c31-11e8", 43 | "dataIndex": "", 44 | "title": "富文本组件", 45 | "description": "", 46 | "component": "rich-text", 47 | "options": { 48 | "render": "

商品名: {{rec.name}}

" 49 | }, 50 | "align": "center" 51 | }, 52 | ], 53 | }; 54 | 55 | const dataSource = [ 56 | { 57 | id: 1, 58 | name: "商品一", 59 | price: 7999, 60 | status: "onSale", 61 | pictureUrl: 'https://img14.360buyimg.com/imagetools/jfs/t1/119951/14/21336/15771/6218427eE68f8f468/e0647b9b7507755d.png', 62 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 63 | }, 64 | ]; 65 | 66 | const Demo = () => { 67 | return ( 68 | 73 | ); 74 | }; 75 | 76 | export default Demo; 77 | ``` 78 | -------------------------------------------------------------------------------- /docs/drip-table-generator/demo/custom-component.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * ## DUMI CONFIG ## 3 | * transform: true 4 | * defaultShowCode: true 5 | * hideActions: ["CSB"] 6 | */ 7 | 8 | import { Button, Row } from 'antd'; 9 | import { DripTableSchema } from 'drip-table'; 10 | import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator'; 11 | import React from 'react'; 12 | 13 | import { mockData } from '../../demo-data'; 14 | 15 | const initialSchema: DripTableSchema = { 16 | pagination: false, 17 | columns: [ 18 | ], 19 | }; 20 | 21 | function Demo() { 22 | const generator: React.MutableRefObject = React.useRef(null); 23 | 24 | return ( 25 | 26 | 27 | 28 | 29 | { console.log(schema); }} 36 | /> 37 | 38 | ); 39 | } 40 | 41 | export default Demo; 42 | -------------------------------------------------------------------------------- /docs/drip-table-generator/demo/custom-global-settings.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : qianjing29 (qianjing29@jd.com) 5 | * @modifier : qianjing29 (qianjing29@jd.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import { DripTableGeneratorPanel, DTGComponentPropertySchema } from 'drip-table-generator'; 10 | 11 | export const CustomGlobalConfigPanel: DripTableGeneratorPanel = { 12 | mode: 'add', 13 | configs: [ 14 | { 15 | name: 'ext.customProps', 16 | group: '自定义组', 17 | 'ui:title': '表格自定义属性', 18 | 'ui:type': 'input', 19 | 'ui:props': {}, 20 | type: 'string', 21 | }, 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /docs/drip-table-generator/demo/demo.module.less: -------------------------------------------------------------------------------- 1 | /* stylelint-disable selector-class-pattern */ 2 | .__dumi-default-layout[data-route="/drip-table-generator/preview"], 3 | .__dumi-default-layout[data-route="/demo"], 4 | .__dumi-default-layout[data-route="/demo/"] { 5 | padding-top: 64px; 6 | padding-left: 0; 7 | padding-right: 0; 8 | 9 | .__dumi-default-previewer-demo { 10 | padding: 0; 11 | } 12 | 13 | .sample-header-extra-container { 14 | margin: 12px 0 0; 15 | padding: 16px; 16 | border-bottom: 1px solid #e6e6ee; 17 | box-shadow: 0 1px 4px -1px #0000000d; 18 | 19 | .header-button { 20 | margin: 0 12px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/drip-table-generator/demo/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 案例展示 3 | sidemenu: false 4 | toc: content 5 | --- 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/drip-table-generator/demo/text-component.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import { DripTableColumnSchema, DripTableComponentProps, DripTableRecordTypeBase, indexValue } from 'drip-table'; 10 | import React from 'react'; 11 | 12 | export type TextColumnSchema = DripTableColumnSchema<'custom::TextComponent', { 13 | /** 14 | * 字体大小 15 | */ 16 | fontSize?: string; 17 | /** 18 | * 兜底文案 19 | */ 20 | noDataValue?: string; 21 | /** 22 | * 数据处理 23 | */ 24 | dataProcess?: string; 25 | }>; 26 | 27 | interface TextProps extends DripTableComponentProps { } 28 | 29 | interface TextState {} 30 | 31 | export default class TextComponent extends React.PureComponent, TextState> { 32 | private get fontSize() { 33 | let fontSize = String(this.props.schema.options.fontSize || '').trim(); 34 | if ((/^[0-9]+$/uig).test(fontSize)) { 35 | fontSize += 'px'; 36 | } 37 | return fontSize; 38 | } 39 | 40 | public render(): JSX.Element { 41 | const { schema, data } = this.props; 42 | const { dataIndex, 43 | options: { noDataValue } } = schema; 44 | const value = indexValue(data, dataIndex, ''); 45 | const contentStr = `${value || noDataValue}`; 46 | return ( 47 |
48 | { contentStr } 49 |
50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /docs/drip-table-generator/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 常见问题 3 | toc: content 4 | --- 5 | 6 | ## 常见问题 7 | 8 | ### 1、是否支持自定义组件面板？ 9 | 10 | 可以，`` 添加 `customComponentPanel` 和 `customComponent` 属性即可。 11 | 其中，`customComponentPanel` 传入自定义组件的属性配置等配置信息，`customComponent` 属性传入自定义组。 12 | 13 | ### 2、使用时样式错乱该如何解决？ 14 | 15 | 首先排查一下是否未安装 `antd`、`drip-table`，然后，查看一下组件是否引入了对应的样式文件。 16 | 17 | ### 3、安装后运行项目报错： `ReferenceError: Buffer is not defined`，如何解决？ 18 | 19 | 建议查看一下是否是因为本地项目使用了 `webpack5`，然后安装最新版本的 `drip-table`。 20 | -------------------------------------------------------------------------------- /docs/drip-table-generator/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | toc: content 4 | --- 5 | 6 |
7 | logo 8 | DripTableGenerator 9 |
10 | 11 | > 可视化的 `DripTable` `JSON Schema` 配置数据的生成工具，简单易用。 12 | 13 | 14 | ## 优势 15 | 16 | 1. **使用简单**：简单的拖拽即可添加列表配置。 17 | 2. **Drip 生态**：使用 `DripForm` 快速生成业务组件和组件面板。 18 | 3. **自定义组件**：通过在线代码编辑器，实现 `Lowcode` 生成自定义组件。 19 | 4. **配置可视化**：通过专用可视化配置工具，实现简单拖拽即可生成 `JSON Schema` 数据结构数据。 20 | 21 | ## 何时使用 22 | 23 | 1. 用于产品人员通过简单拖拽方式快速搭建列表页。 24 | 2. 用于开发人员通过 `Lowcode` 方式快速生成自定义组件。 25 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/data-fields.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: dataFields 3 | toc: content 4 | --- 5 | 6 | ## dataFields 7 | 8 | - 描述：接口API默认字段名 9 | - 类型：`string[]` 10 | - 默认值：`[]` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | 20 | import { Input } from 'antd'; 21 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 22 | import DripTableGenerator from 'drip-table-generator'; 23 | import React, { useState } from 'react'; 24 | 25 | const schema = { 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | const [dataFields, setDataFields] = useState([]); 64 | return ( 65 | <> 66 | setDataFields(event.target.value.split(',')) } 69 | placeholder="请输入字段名，多个字段名用逗号隔开" 70 | style={{ margin: '8px 0' }} 71 | /> 72 | 77 | 78 | ); 79 | }; 80 | 81 | export default Demo; 82 | ``` 83 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/mock-data-source.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: mockDataSource 3 | toc: content 4 | --- 5 | 6 | ## mockDataSource 7 | 8 | - 描述：是否展示 mock 数据源 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | 20 | import { Button } from 'antd'; 21 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 22 | import DripTableGeneratorProvider from 'drip-table-generator'; 23 | import React, { useState } from 'react'; 24 | 25 | const schema = { 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | const [mockDataSource, setMockDataSource] = useState(true); 64 | return ( 65 | <> 66 | 71 | 76 | 77 | ); 78 | }; 79 | 80 | export default Demo; 81 | ``` 82 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/mode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: mode 3 | toc: content 4 | --- 5 | 6 | ## mode 7 | 8 | - 描述：生成器展示模式，目前支持内置页面组件和弹框两种形式 9 | - 类型：`modal` | `page` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { Button } from "antd"; 20 | import { DripTableExtraOptions, DripTableSchema } from "drip-table"; 21 | import DripTableGeneratorProvider from "drip-table-generator"; 22 | import React, { useState } from "react"; 23 | 24 | const schema = { 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { 32 | mode: "single", 33 | maxRow: 1, 34 | }, 35 | }, 36 | { 37 | key: "mock_2", 38 | title: "商品详情", 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { 43 | mode: "single", 44 | ellipsis: true, 45 | maxRow: 1, 46 | }, 47 | }, 48 | ], 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: 58 | "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | const [mode, setMode] = useState("page"); 64 | return ( 65 | <> 66 | 73 | setMode("page")} 78 | /> 79 | 80 | ); 81 | }; 82 | 83 | export default Demo; 84 | ``` 85 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/no-data-feedback.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: noDataFeedBack 3 | toc: content 4 | --- 5 | 6 | ## noDataFeedBack 7 | 8 | - 描述：自定义 Generator 无数据时的提示信息，`drip-table` 暂不支持 9 | - 类型：`string | ReactNode` 10 | - 默认值：无 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | 20 | import { Input } from 'antd'; 21 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 22 | import DripTableGenerator from 'drip-table-generator'; 23 | import React, { useState } from 'react'; 24 | 25 | const schema = { 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = []; 53 | 54 | const Demo = () => { 55 | return ( 56 | <> 57 | 表格暂无数据 )} 62 | /> 63 | 64 | ); 65 | }; 66 | 67 | export default Demo; 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/on-datasource-change.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: onDataSourceChange 3 | toc: content 4 | --- 5 | 6 | ## onDataSourceChange 7 | 8 | - 描述：导出表格数据 9 | - 类型：`(dataSource: DripTableProps['dataSource']) => void` 10 | - 默认值：无 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { message, Button } from "antd"; 20 | import { DripTableExtraOptions, DripTableSchema } from "drip-table"; 21 | import DripTableGenerator from "drip-table-generator"; 22 | import React, { useState } from "react"; 23 | 24 | const schema = { 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { 32 | mode: "single", 33 | maxRow: 1, 34 | }, 35 | }, 36 | { 37 | key: "mock_2", 38 | title: "商品详情", 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { 43 | mode: "single", 44 | ellipsis: true, 45 | maxRow: 1, 46 | }, 47 | }, 48 | ], 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: 58 | "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | { 68 | message.info("导出 Schema:" + JSON.stringify(dataSource), 3); 69 | }} 70 | /> 71 | ); 72 | }; 73 | 74 | export default Demo; 75 | ``` 76 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/on-export-schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: onExportSchema 3 | toc: content 4 | --- 5 | 6 | ## onExportSchema 7 | 8 | - 描述：导出表格 Schema 9 | - 类型：`(schema: DripTableSchema) => void` 10 | - 默认值：无 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | 20 | import { message, Button } from 'antd'; 21 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 22 | import DripTableGenerator from 'drip-table-generator'; 23 | import React, { useState } from 'react'; 24 | 25 | const schema = { 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | { message.info('导出 Schema:' + JSON.stringify(schema), 3); }} 68 | /> 69 | ); 70 | }; 71 | 72 | export default Demo; 73 | ``` 74 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/on-save.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: onSave 3 | toc: content 4 | --- 5 | 6 | ## save 7 | 8 | - 描述：点击保存按钮触发的事件 9 | - 类型：`Function(schema: DripTableSchema): void` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { Button, message } from "antd"; 20 | import { DripTableExtraOptions, DripTableSchema } from "drip-table"; 21 | import DripTableGeneratorProvider from "drip-table-generator"; 22 | import React, { useState } from "react"; 23 | 24 | const schema = { 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { 32 | mode: "single", 33 | maxRow: 1, 34 | }, 35 | }, 36 | { 37 | key: "mock_2", 38 | title: "商品详情", 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { 43 | mode: "single", 44 | ellipsis: true, 45 | maxRow: 1, 46 | }, 47 | }, 48 | ], 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: 58 | "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | <> 65 | { 70 | console.log(schema); 71 | message.success(JSON.stringify(schema)); 72 | }} 73 | /> 74 | 75 | ); 76 | }; 77 | 78 | export default Demo; 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/save.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: save 3 | toc: content 4 | --- 5 | 6 | ## save 7 | 8 | - 描述：是否展示保存按钮 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { Button } from "antd"; 20 | import { DripTableExtraOptions, DripTableSchema } from "drip-table"; 21 | import DripTableGeneratorProvider from "drip-table-generator"; 22 | import React, { useState } from "react"; 23 | 24 | const schema = { 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { 32 | mode: "single", 33 | maxRow: 1, 34 | }, 35 | }, 36 | { 37 | key: "mock_2", 38 | title: "商品详情", 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { 43 | mode: "single", 44 | ellipsis: true, 45 | maxRow: 1, 46 | }, 47 | }, 48 | ], 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: 58 | "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | const [save, setSaveBtn] = useState(false); 64 | return ( 65 | <> 66 | 73 | 78 | 79 | ); 80 | }; 81 | 82 | export default Demo; 83 | ``` 84 | -------------------------------------------------------------------------------- /docs/drip-table-generator/props/show-tool-layout.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: showToolLayout 3 | toc: content 4 | --- 5 | 6 | ## showToolLayout 7 | 8 | - 描述：是否展示工具栏 9 | - 类型：`boolean` 10 | - 默认值：`true` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | 20 | import { Button } from 'antd'; 21 | import { DripTableExtraOptions, DripTableSchema } from 'drip-table'; 22 | import DripTableGeneratorProvider from 'drip-table-generator'; 23 | import React, { useState } from 'react'; 24 | 25 | const schema = { 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | const [showToolLayout, setShowToolLayout] = useState(false); 64 | return ( 65 | <> 66 | 71 | 76 | 77 | ); 78 | }; 79 | 80 | export default Demo; 81 | ``` 82 | -------------------------------------------------------------------------------- /docs/drip-table-generator/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 快速开始 3 | toc: content 4 | --- 5 | 6 | ## 快速开始 7 | 8 | > 本篇主要介绍 `drip-table-generator` 的最基本的能力 9 | 10 | ## 如何使用 11 | 12 | ### 安装依赖 13 | 14 | drip-table-generator 依赖 `antd`、`drip-table` 和 `react`，单独使用不要忘记安装～ 15 | 16 | > yarn 17 | 18 | ```sh 19 | yarn add drip-table-generator 20 | ``` 21 | 22 | > npm 23 | 24 | ```sh 25 | npm install --save drip-table-generator 26 | ``` 27 | 28 | ### 依赖引入 29 | 30 | ```js | pure 31 | import DripTableGenerator from 'drip-table-generator'; 32 | import 'drip-table-generator/dist/index.min.css'; 33 | ``` 34 | 35 | ### 页面引入 36 | 37 | ```js | pure 38 | 39 | ``` 40 | 41 | ### 代码演示 42 | 43 | ```jsx 44 | /** 45 | * transform: true 46 | * defaultShowCode: true 47 | * hideActions: ["CSB"] 48 | */ 49 | import React from 'react'; 50 | import DripTableGenerator from 'drip-table-generator'; 51 | 52 | const Demo = () => { 53 | return ( 54 | 55 | ); 56 | }; 57 | 58 | export default Demo; 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/drip-table-generator/tutorial/data-source.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 数据预览配置 3 | toc: content 4 | --- 5 | 6 | ## 数据预览配置 7 | 8 | > 本篇主要介绍如何利用 `drip-table-generator` 手动配置默认数据以及数据对应字段。 9 | 10 | ## 自动预览数据配置 11 | 12 | `drip-table-generator` 提供了 `dataSource` 和 [🔗`dataFields`](/drip-table-generator/props/data-fields) 两个字段，两个字段需要配合使用，从而实现表格数据的预览。其中 `dataSource` 负责表格数据的预览， `dataFields` 设置字段选择器下拉框数据。 13 | 14 | 效果如下图所示： 15 | ![image](https://img11.360buyimg.com/imagetools/jfs/t1/126307/22/30818/355128/636261b7Ec3def89f/dc46df1bab43decd.png) 16 | 17 | ## 手动默认数据配置 18 | 19 | `drip-table-generator` 提供了 [🔗`mockDataSource`](/drip-table-generator/props/mock-data-source) 字段控制属性栏“表格数据”选项卡的显隐控制，当打开时提供文本编辑器，允许用户手动输入数据来覆盖 `dataSource` 字段传入的值。 20 | 21 | 效果如下图所示： 22 | ![image](https://img12.360buyimg.com/imagetools/jfs/t1/180703/35/29787/567565/636261b8Ee7ed82b1/b7c6c713a48dde60.png) 23 | -------------------------------------------------------------------------------- /docs/drip-table-generator/tutorial/title.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 表头自定义配置 3 | toc: content 4 | --- 5 | 6 | ## 表头自定义配置 7 | 8 | > 本篇主要介绍如何利用 `drip-table-generator` 组件的头部属性自定义配置该列的表头。 9 | 10 | `drip-table-generator` 的每列的头部支持富文本来展示丰富的头部信息以及支持带 `tooltip` 的描述信息。另外，后续每列的表头还支持通过自定义插槽载入用户自定义组件，敬请期待。 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | 19 | import { DripTableExtraOptions, DripTableSchema } from "drip-table"; 20 | import DripTableGenerator from "drip-table-generator"; 21 | import React from "react"; 22 | 23 | const schema = { 24 | pagination: false, 25 | columns: [ 26 | { 27 | key: "mock_2", 28 | title: 29 | '商品名称', 30 | width: "156px", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | prefix: "", 35 | suffix: "", 36 | parts: [], 37 | defaultValue: "", 38 | format: "{{rec}}", 39 | maxRow: 2, 40 | }, 41 | type: "string", 42 | dataIndex: "name", 43 | align: "center", 44 | dataIndexMode: "direct", 45 | description: 46 | '

提示标题

这是一串提示说明

', 47 | }, 48 | ], 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: 58 | "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | 69 | ); 70 | }; 71 | 72 | export default Demo; 73 | ``` 74 | -------------------------------------------------------------------------------- /docs/drip-table-generator/tutorial/usage-pro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 高级教程 3 | toc: content 4 | --- 5 | 6 | ## 高级教程 7 | 8 | > 本篇主要介绍 `drip-table-generator` 的高级使用能力介绍 9 | 10 | ## 一、在线 `Lowcode` 组件 11 | 12 | **Generator 提供了可在线编写简单代码的自定义组件，方便用户生成自己所想要的渲染HTML** 13 | 14 | 自定义代码编写时返回一段字符串或者带 `HTML` 的字符串，`drip-table` 会将其渲染成 `HTML`。 15 | 16 | 效果图如下所示： 17 | 18 | ![image](https://img13.360buyimg.com/imagetools/jfs/t1/218522/19/5799/94575/61a09db2E30ef6a81/add97ba39098f925.jpg) 19 | 20 | #### 参数 `rec` 21 | 22 | - 描述: `模板字段` 23 | - 类型: `Record` 24 | - 默认值: `null` 25 | 用于获取表格数据的一条记录，数据格式取决于用户传入的数据格式。 26 | 27 | 示例： 28 | 29 | ```js 30 | return `${rec.name}`; 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/drip-table/api/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 表格接口 Api 3 | toc: content 4 | --- 5 | 6 | ## 表格接口 Api 7 | 8 | 通过操作该对象，获取、控制表格的属性。 9 | 10 | ### 子项 11 | 12 | | 参数名 | 描述 | 必填 | 详情 | 13 | | ----- | ---- | ---- | ---- | 14 | | [displayColumnKeys](/drip-table/api/display-column-keys) | 表格展示列 | × | [🔗 示例](/drip-table/api/display-column-keys) | 15 | | [setDisplayColumnKeys](/drip-table/api/set-display-column-keys) | 设置表格展示列 | × | [🔗 示例](/drip-table/api/set-display-column-keys) | 16 | | [sorter](/drip-table/api/sorter) | 表格排序器 | × | [🔗 示例](/drip-table/api/sorter) | 17 | | [setSorter](/drip-table/api/set-sorter) | 设置表格排序器 | × | [🔗 示例](/drip-table/api/set-sorter) | 18 | -------------------------------------------------------------------------------- /docs/drip-table/demo/custom-components/event.ts: -------------------------------------------------------------------------------- 1 | import { DripTableCustomEvent } from 'drip-table'; 2 | 3 | export interface CustomComponentSampleEvent extends DripTableCustomEvent<'sample-event'> { } 4 | 5 | export type CustomComponentEvent = 6 | | CustomComponentSampleEvent 7 | | never; 8 | -------------------------------------------------------------------------------- /docs/drip-table/demo/custom-components/index.ts: -------------------------------------------------------------------------------- 1 | import CustomComponentSample, { CustomComponentSampleColumnSchema } from './sample'; 2 | 3 | export type CustomColumnSchema = 4 | | CustomComponentSampleColumnSchema; 5 | 6 | export const CustomComponents = { 7 | [CustomComponentSample.componentName]: CustomComponentSample, 8 | }; 9 | 10 | export type { CustomComponentEvent } from './event'; 11 | -------------------------------------------------------------------------------- /docs/drip-table/demo/custom-components/sample.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import { Button } from 'antd'; 10 | import { DripTableColumnSchema, DripTableComponentProps, SchemaObject } from 'drip-table'; 11 | import React from 'react'; 12 | 13 | import { SampleRecordType } from '../../../demo-data'; 14 | import { CustomComponentEvent } from '.'; 15 | 16 | export type CustomComponentSampleColumnSchema = DripTableColumnSchema<'custom::CustomComponentSample', { 17 | customSchema?: string; 18 | }>; 19 | 20 | export interface CustomComponentSampleProps extends DripTableComponentProps { } 21 | 22 | interface CustomComponentSampleState { } 23 | 24 | export default class CustomComponentSample extends React.PureComponent { 25 | public static componentName = 'CustomComponentSample' as const; 26 | public static schema: SchemaObject = { 27 | type: 'object', 28 | properties: { 29 | customSchema: { type: 'string' }, 30 | }, 31 | }; 32 | 33 | public constructor(props: CustomComponentSampleProps) { 34 | super(props); 35 | this.state = {}; 36 | } 37 | 38 | public render() { 39 | return ( 40 |
41 | 自定义: 42 | { ' ' } 43 | { this.props.data?.status } 44 | 45 | { this.props.schema.options.customSchema } 46 |
47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /docs/drip-table/demo/demo.module.less: -------------------------------------------------------------------------------- 1 | 2 | .popup-wrapper { 3 | transition: height 300ms ease-in-out; 4 | } 5 | 6 | .popup-layer { 7 | position: fixed; 8 | z-index: 200; 9 | bottom: 0; 10 | left: 0; 11 | right: 0; 12 | display: flex; 13 | flex-direction: column; 14 | transition: height 300ms ease-in-out; 15 | border-top: 1px solid #1890ff; 16 | } 17 | 18 | .popup-button { 19 | display: inline-block; 20 | padding: 5px 10px; 21 | background: #ffffff; 22 | border: 1px solid #dddddd; 23 | border-bottom: none; 24 | border-top-left-radius: 4px; 25 | border-top-right-radius: 4px; 26 | cursor: pointer; 27 | } 28 | 29 | .popup-main { 30 | flex: 1 1 auto; 31 | background: #ffffff; 32 | padding: 0 0 10px; 33 | overflow-y: auto; 34 | 35 | :global(.ant-tabs-nav) { 36 | padding: 0 20px; 37 | margin-bottom: 1px; 38 | } 39 | } 40 | 41 | .popup-tabs { 42 | height: 100%; 43 | 44 | :global(.ant-tabs-content) { 45 | height: 100%; 46 | } 47 | } 48 | 49 | .json-edit-tab { 50 | height: 100%; 51 | 52 | > div { 53 | height: 100%; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /docs/drip-table/demo/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 高级案例 Pro Demo 3 | sidemenu: false 4 | toc: false 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/drip-table/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 常见问题 FAQ 3 | toc: content 4 | --- 5 | 6 | ## 常见问题 7 | 8 | ### 能否不渲染表头表单？ 9 | 10 | 可以，在 `JSON Schema` 标准配置数据中设置 `title: false` 即可。 11 | -------------------------------------------------------------------------------- /docs/drip-table/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 Index 3 | toc: content 4 | --- 5 | 6 |
7 | logo 8 | DripTable 9 |
10 | 11 | > 轻量简单的企业级中后台**动态列表生成解决方案**，通过简单配置快速生成页面动态列表。 12 | 13 | ## 优势 14 | 15 | 1. **高效开发**：提高前端列表开发效率，实现 `Lowcode` 方式快速开发列表页。 16 | 2. **配置化渲染**：以简单的 `JSON Schema` 配置字段，自动渲染处所需要的列表，降低用户使用成本。 17 | 3. **动态可扩展**：支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件。 18 | 4. **界面框架自由**：表格界面框架支持多种主题包，另外还支持自定义主题包。 19 | 20 | ## 何时使用 21 | 22 | 1. 用于中后台 `CMS` 列表页的快速搭建，通过简单 `JSON Schema` 数据即可生成列表，无需硬编码。 23 | 2. 用于 `Lowcode` 列表搭建的前端 `Table` 预览以及实现，无需复杂前端代码，便可实现自定义的列表。 24 | -------------------------------------------------------------------------------- /docs/drip-table/migration/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 版本升级 Migration 3 | toc: false 4 | --- 5 | 6 | ## 目录 7 | 8 | | 版本号 | 描述 | 详情 | 9 | | ----- | ---- | ---- | 10 | | [V2-V3](/drip-table/migration/v2-v3) | 从 V2 升级到 V3 | [🔗 详情](/drip-table/migration/v2-v3) | 11 | -------------------------------------------------------------------------------- /docs/drip-table/migration/v2-v3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 版本升级 V2-V3 Migration from V2 to V3 3 | toc: content 4 | --- 5 | 6 | ## 版本升级 V2-V3 Migration from V2 to V3 7 | 8 | ### 1. 移除不再需要的界面库驱动 `driver` 字段 9 | 10 | * V2 11 | 12 | ```jsx | pure 13 | 14 | ``` 15 | 16 | * V3 17 | 18 | ```jsx | pure 19 | 20 | ``` 21 | 22 | ### 2. 标准化样式覆盖 23 | 24 | `DripTable` 内部样式前缀统一标准化，内部 rc 组件统一 `jfe-drip-table-rc-` 前缀，内部表格基础组件统一 `jfe-drip-table-cc-` 前缀，表格布局主体统一 `jfe-drip-table-layout-{LAYOUT_TYPE}-` 前缀。 25 | -------------------------------------------------------------------------------- /docs/drip-table/props/class-name.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 样式表类名 className 3 | toc: content 4 | --- 5 | 6 | ## 样式表类名 className 7 | 8 | - 描述：样式表类名 9 | - 类型：`string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 | 61 | 66 | 67 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/props/component-did-mount.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 组件加载完成 componentDidMount 3 | toc: content 4 | --- 5 | 6 | ## 组件加载完成 componentDidMount 7 | 8 | - 描述：生命周期：组件加载完成 9 | - 类型：`(tableInfo: DripTableTableInformation) => void` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import { message } from "antd"; 19 | import React from "react"; 20 | import DripTable from "drip-table"; 21 | 22 | const schema = { 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | { message.info('Lifecycle: componentDidMount'); }} 65 | /> 66 | ); 67 | }; 68 | 69 | export default Demo; 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/drip-table/props/component-did-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 组件更新完成 componentDidUpdate 3 | toc: content 4 | --- 5 | 6 | ## 组件更新完成 componentDidUpdate 7 | 8 | - 描述：生命周期：组件更新完成 9 | - 类型：`(tableInfo: DripTableTableInformation) => void` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import { message } from "antd"; 19 | import React from "react"; 20 | import DripTable from "drip-table"; 21 | 22 | const schema = { 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | { message.info('Lifecycle: componentDidUpdate'); }} 65 | /> 66 | ); 67 | }; 68 | 69 | export default Demo; 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/drip-table/props/component-will-unmount.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 组件即将卸载 componentWillUnmount 3 | toc: content 4 | --- 5 | 6 | ## 组件即将卸载 componentWillUnmount 7 | 8 | - 描述：生命周期：组件即将卸载 9 | - 类型：`(tableInfo: DripTableTableInformation) => void` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import { message } from "antd"; 19 | import React from "react"; 20 | import DripTable from "drip-table"; 21 | 22 | const schema = { 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | { message.info('Lifecycle: componentWillUnmount'); }} 65 | /> 66 | ); 67 | }; 68 | 69 | export default Demo; 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/drip-table/props/current-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 当前页码 currentPage 3 | toc: content 4 | --- 5 | 6 | ## 当前页码 currentPage 7 | 8 | - 描述：当前页码 9 | - 类型：`number` 10 | - 默认值：`1` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | pagination: { 47 | pageSize: 20, 48 | }, 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 58 | }, 59 | ]; 60 | 61 | const Demo = () => { 62 | return ( 63 | 69 | ); 70 | }; 71 | 72 | export default Demo; 73 | ``` 74 | -------------------------------------------------------------------------------- /docs/drip-table/props/data-source.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 校验配置项 dataSource 3 | toc: content 4 | --- 5 | 6 | ## 数据源 dataSource 7 | 8 | - 描述：数据源 9 | - 类型：`RecordType[]` 10 | - 默认值：必填 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 | 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/props/display-column-keys.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 当前显示列键 displayColumnKeys 3 | toc: content 4 | --- 5 | 6 | ## 当前显示列键 displayColumnKeys 7 | 8 | - 描述：当前显示的列键 9 | - 类型：`React.Key[]` 10 | - 默认值：`[]` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | hidable: true, 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | hidable: true, 39 | dataIndex: "description", 40 | component: "text", 41 | options: { 42 | mode: "single", 43 | ellipsis: true, 44 | maxRow: 1, 45 | }, 46 | }, 47 | ], 48 | }; 49 | 50 | const dataSource = [ 51 | { 52 | id: 1, 53 | name: "商品一", 54 | price: 7999, 55 | status: "onSale", 56 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 57 | }, 58 | ]; 59 | 60 | const Demo = () => { 61 | return ( 62 | 67 | ); 68 | }; 69 | 70 | export default Demo; 71 | ``` 72 | -------------------------------------------------------------------------------- /docs/drip-table/props/empty-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 空表提示 emptyText 3 | toc: content 4 | --- 5 | 6 | ## 空表提示 emptyText 7 | 8 | - 描述：表格无数据时提示语 9 | - 类型：`(tableInfo: DripTableInformation) => React.ReactNode` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | import { Empty } from 'antd'; 21 | 22 | const schema = { 23 | emptyText: "暂无数据", 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | dataIndex: "name", 29 | component: "text", 30 | options: { 31 | mode: "single", 32 | maxRow: 1, 33 | }, 34 | }, 35 | { 36 | key: "mock_2", 37 | title: "商品详情", 38 | align: "center", 39 | dataIndex: "description", 40 | component: "text", 41 | options: { 42 | mode: "single", 43 | ellipsis: true, 44 | maxRow: 1, 45 | }, 46 | }, 47 | ], 48 | }; 49 | 50 | const dataSource = []; 51 | 52 | const Demo = () => { 53 | return ( 54 | } 58 | /> 59 | ); 60 | }; 61 | 62 | export default Demo; 63 | ``` 64 | -------------------------------------------------------------------------------- /docs/drip-table/props/ext.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 附加透传数据 ext 3 | toc: content 4 | --- 5 | 6 | ## 附加透传数据 ext 7 | 8 | - 描述：自定义单元格组件附加透传数据，一般用于传递通用业务数据、环境变量 9 | - 类型：`ExtractDripTableExtraOption` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | { 46 | key: "mock_3", 47 | title: "Custom Component", 48 | align: "center", 49 | dataIndex: "description", 50 | component: "custom::Sample", 51 | }, 52 | ], 53 | }; 54 | 55 | const dataSource = [ 56 | { 57 | id: 1, 58 | name: "商品一", 59 | price: 7999, 60 | status: "onSale", 61 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 62 | }, 63 | ]; 64 | 65 | const Demo = () => { 66 | return ( 67 |
Extra Data: {props.ext.someExtraData}
, 73 | }, 74 | }} 75 | ext={{ someExtraData: 'extra value' }} 76 | /> 77 | ); 78 | }; 79 | 80 | export default Demo; 81 | ``` 82 | -------------------------------------------------------------------------------- /docs/drip-table/props/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 底部渲染函数 footer 3 | toc: content 4 | --- 5 | 6 | ## 底部渲染函数 footer 7 | 8 | - 描述：底部自定义渲染函数 9 | - 类型：`(data: readonly RecordType[]) => React.ReactNode` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 |
这是一张拥有 {records.length} 条数据的表格的页脚
} 64 | /> 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/props/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 加载中 loading 3 | toc: content 4 | --- 5 | 6 | ## 加载中 loading 7 | 8 | - 描述：加载中 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 | 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/props/on-row-click.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 点击行触发 onRowClick 3 | toc: content 4 | --- 5 | 6 | ## 点击行触发 onRowClick 7 | 8 | - 描述：点击行 9 | - 类型： 10 | 11 | ```typescript 12 | type OnRowClick = ( 13 | record: RecordType | RecordType[], 14 | index: number | string | (number | string)[], 15 | tableInfo: DripTableTableInformation, 16 | ) => void; 17 | ``` 18 | 19 | - 默认值：`undefined` 20 | - 说明：[`DripTableTableInformation`](/drip-table/types/table-information) 21 | 22 | ```jsx 23 | /** 24 | * transform: true 25 | * defaultShowCode: true 26 | * hideActions: ["CSB"] 27 | */ 28 | import React from "react"; 29 | import DripTable from "drip-table"; 30 | 31 | const schema = { 32 | columns: [ 33 | { 34 | key: "mock_1", 35 | title: "商品名称", 36 | dataIndex: "name", 37 | component: "text", 38 | options: { 39 | mode: "single", 40 | maxRow: 1, 41 | }, 42 | }, 43 | { 44 | key: "mock_2", 45 | title: "商品详情", 46 | align: "center", 47 | dataIndex: "description", 48 | component: "text", 49 | options: { 50 | mode: "single", 51 | ellipsis: true, 52 | maxRow: 1, 53 | }, 54 | }, 55 | ], 56 | }; 57 | 58 | const dataSource = [ 59 | { 60 | id: 1, 61 | name: "商品一", 62 | price: 7999, 63 | status: "onSale", 64 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 65 | }, 66 | ]; 67 | 68 | const Demo = () => { 69 | return ( 70 | { console.log({ record, index }); }} 74 | /> 75 | ); 76 | }; 77 | 78 | export default Demo; 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/drip-table/props/on-row-double-click.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 双击行触发 onRowDoubleClick 3 | toc: content 4 | --- 5 | 6 | ## 双击行触发 onRowDoubleClick 7 | 8 | - 描述：双击行 9 | - 类型： 10 | 11 | ```typescript 12 | type OnRowDoubleClick = ( 13 | record: RecordType | RecordType[], 14 | index: number | string | (number | string)[], 15 | tableInfo: DripTableTableInformation, 16 | ) => void; 17 | ``` 18 | 19 | - 默认值：`undefined` 20 | - 说明：[`DripTableTableInformation`](/drip-table/types/table-information) 21 | 22 | ```jsx 23 | /** 24 | * transform: true 25 | * defaultShowCode: true 26 | * hideActions: ["CSB"] 27 | */ 28 | import React from "react"; 29 | import DripTable from "drip-table"; 30 | 31 | const schema = { 32 | columns: [ 33 | { 34 | key: "mock_1", 35 | title: "商品名称", 36 | dataIndex: "name", 37 | component: "text", 38 | options: { 39 | mode: "single", 40 | maxRow: 1, 41 | }, 42 | }, 43 | { 44 | key: "mock_2", 45 | title: "商品详情", 46 | align: "center", 47 | dataIndex: "description", 48 | component: "text", 49 | options: { 50 | mode: "single", 51 | ellipsis: true, 52 | maxRow: 1, 53 | }, 54 | }, 55 | ], 56 | }; 57 | 58 | const dataSource = [ 59 | { 60 | id: 1, 61 | name: "商品一", 62 | price: 7999, 63 | status: "onSale", 64 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 65 | }, 66 | ]; 67 | 68 | const Demo = () => { 69 | return ( 70 | { console.log({ record, index }); }} 74 | /> 75 | ); 76 | }; 77 | 78 | export default Demo; 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/drip-table/props/ref.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 引用实例 ref 3 | toc: content 4 | --- 5 | 6 | ## 引用实例 ref 7 | 8 | > 引用实例，利用 `ref` 引用可以在外部主动改变 `drip-table` 的状态。 9 | 10 | ## 获取表格实例 11 | 12 | 利用 `react` 的 `ref` 属性可以获取表格内部开放的状态和函数从而改变 `drip-table` 实例 13 | 14 | > hook写法 15 | 16 | ```js 17 | const table = useRef(null); 18 | ``` 19 | 20 | > component 写法: 21 | 22 | ```js 23 | const table = React.createRef(); 24 | 25 | 26 | ``` 27 | 28 | ## 开放属性 29 | 30 | ### selectedRowKeys 31 | 32 | - 描述: `选中行的键` 33 | - 类型: `Array` 34 | - 默认值: `[]` 35 | 如果 `` 组件设置了属性 `rowKey`，则存储每条记录 `record` 的 `rowKey` 的值，否则存储每条记录对应的整数序号(从0开始记)。 36 | 37 | ### pagination 38 | 39 | - 描述: `分页配置` 40 | - 类型: `Pagination` 41 | - 默认值: `{current: 1, pageSize: 10, total: 0}` 42 | `` 内部的分页器的基本配置，默认情况包含当前页 `current`，页面大小 `pageSize`，总记录数 `total` 三个属性。 43 | 44 | ### loading 45 | 46 | - 描述: `是否加载` 47 | - 类型: `boolean` 48 | - 默认值: `false` 49 | 用于判断 `` 当前是否处在加载状态。 50 | 51 | ## 开放函数 52 | 53 | ### select 54 | 55 | - 描述: `选中列` 56 | - 类型: `function(keys: Array): void` 57 | - 返回值: `void` 58 | 主动调用 `drip-table` 实例的 `select` 函数可以从组件外部手动触发选中某些列、全选和全不选的状态。 59 | 60 | ## 代码示例 61 | 62 | 63 | -------------------------------------------------------------------------------- /docs/drip-table/props/render-selection.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义多选 renderSelection 3 | toc: content 4 | --- 5 | 6 | ## 自定义多选 renderSelection 7 | 8 | - 描述：使用自定义多选替换表格多选。 9 | - 类型：`React.ComponentType` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | import { Checkbox } from "antd"; 21 | 22 | const schema = { 23 | rowSelection: true, 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | dataIndex: "name", 29 | component: "text", 30 | options: { mode: "single", maxRow: 1 }, 31 | }, 32 | { 33 | key: "mock_2", 34 | title: "商品详情", 35 | align: "center", 36 | dataIndex: "description", 37 | component: "text", 38 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 39 | }, 40 | ], 41 | }; 42 | 43 | const dataSource = Array(200).fill(0).map((_, i) => ({ 44 | id: i, 45 | name: "商品" + i, 46 | price: 7999, 47 | status: "onSale", 48 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 49 | })); 50 | 51 | const Demo = () => { 52 | return ( 53 | ( 57 |
58 |
自定义多选：
59 |
{ JSON.stringify(props) }
60 | { props.onChange(e.target.checked); }} 64 | /> 65 |
66 | )} 67 | /> 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/props/schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 schema 3 | title: 表格 schema 4 | toc: content 5 | --- 6 | 7 | ## 表格 schema 8 | 9 | - 描述：表格 Schema 10 | - 类型：`DripTableSchema` 11 | - 默认值：必填 12 | - 说明：[Schema 详细文档](/drip-table/schema) 13 | 14 | ```jsx 15 | /** 16 | * transform: true 17 | * defaultShowCode: true 18 | * hideActions: ["CSB"] 19 | */ 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | dataIndex: "name", 29 | component: "text", 30 | options: { 31 | mode: "single", 32 | maxRow: 1, 33 | }, 34 | }, 35 | { 36 | key: "mock_2", 37 | title: "商品详情", 38 | align: "center", 39 | dataIndex: "description", 40 | component: "text", 41 | options: { 42 | mode: "single", 43 | ellipsis: true, 44 | maxRow: 1, 45 | }, 46 | }, 47 | ], 48 | }; 49 | 50 | const dataSource = [ 51 | { 52 | id: 1, 53 | name: "商品一", 54 | price: 7999, 55 | status: "onSale", 56 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 57 | }, 58 | ]; 59 | 60 | const Demo = () => { 61 | return ( 62 | 66 | ); 67 | }; 68 | 69 | export default Demo; 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/drip-table/props/selected-row-keys.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 选中行键 selectedRowKeys 3 | toc: content 4 | --- 5 | 6 | ## 选中行键 selectedRowKeys 7 | 8 | - 描述：当前选中的行键 9 | - 类型：`React.Key[]` 10 | - 默认值：`[]` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | rowKey: "id", 47 | rowSelection: true, 48 | }; 49 | 50 | const dataSource = [ 51 | { 52 | id: 1, 53 | name: "商品一", 54 | price: 7999, 55 | status: "onSale", 56 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 57 | }, 58 | ]; 59 | 60 | const Demo = () => { 61 | return ( 62 | 67 | ); 68 | }; 69 | 70 | export default Demo; 71 | ``` 72 | -------------------------------------------------------------------------------- /docs/drip-table/props/sticky.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 冻结表头 sticky 3 | toc: content 4 | --- 5 | 6 | ## 冻结表头 sticky 7 | 8 | - 描述：冻结表头和滚动条设置项 9 | - 类型： 10 | 11 | ```typescript 12 | interface Sticky { 13 | offsetHeader?: number; 14 | offsetScroll?: number; 15 | getContainer?: () => HTMLElement; 16 | } 17 | ``` 18 | 19 | - 默认值：`undefined` 20 | - 说明：该属性仅为冻结表头环境配置，多用于页面存在导航栏或内部滚动等场景，需要配合 [`schema.sticky`](/drip-table/schema/sticky) 设置项开启表格冻结表头开关才能使用。 21 | 22 | ```jsx 23 | /** 24 | * transform: true 25 | * defaultShowCode: true 26 | * hideActions: ["CSB"] 27 | */ 28 | import React from "react"; 29 | import DripTable from "drip-table"; 30 | 31 | const schema = { 32 | sticky: true, 33 | columns: [ 34 | { 35 | key: "mock_1", 36 | title: "商品名称", 37 | dataIndex: "name", 38 | component: "text", 39 | options: { mode: "single", maxRow: 1 }, 40 | }, 41 | { 42 | key: "mock_2", 43 | title: "商品详情", 44 | align: "center", 45 | dataIndex: "description", 46 | component: "text", 47 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = Array(10).fill(0).map((_, i) => ({ 53 | id: i, 54 | name: "商品" + i, 55 | price: 7999, 56 | status: "onSale", 57 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 58 | })); 59 | 60 | const Demo = () => { 61 | return ( 62 | document.documentElement, 69 | }} 70 | /> 71 | ); 72 | }; 73 | 74 | export default Demo; 75 | ``` 76 | -------------------------------------------------------------------------------- /docs/drip-table/props/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义样式表 style 3 | toc: content 4 | --- 5 | 6 | ## 自定义样式表 style 7 | 8 | - 描述：自定义样式表 9 | - 类型：`React.CSSProperties` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/props/title.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 顶部渲染函数 title 3 | toc: content 4 | --- 5 | 6 | ## 顶部渲染函数 title 7 | 8 | - 描述：顶部自定义渲染函数 9 | - 类型：`(data: readonly RecordType[]) => React.ReactNode` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | ]; 57 | 58 | const Demo = () => { 59 | return ( 60 |
这是一张拥有 {records.length} 条数据的表格的标题
} 64 | /> 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/props/total.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 总条数 total 3 | toc: content 4 | --- 5 | 6 | ## 总条数 total 7 | 8 | - 描述：数据源总条数 9 | - 类型：`number` 10 | - 默认值：dataSource 长度 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | pagination: { 47 | pageSize: 20, 48 | }, 49 | }; 50 | 51 | const dataSource = [ 52 | { 53 | id: 1, 54 | name: "商品一", 55 | price: 7999, 56 | status: "onSale", 57 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 58 | }, 59 | ]; 60 | 61 | const Demo = () => { 62 | return ( 63 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/quick-start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 快速开始 Quick Start 3 | toc: content 4 | --- 5 | 6 | ## 快速开始 7 | 8 | > 本篇主要介绍 `Drip Table` 的基本使用能力介绍 9 | 10 | ## 如何使用 11 | 12 | ### 环境要求 13 | 14 | - `Node` >= 10.14.0 15 | - `React` >= 16.9.0 16 | 17 | ### 安装 18 | 19 | > 安装前确保 `Drip Table` 所依赖 `React` 已经安装完毕。 20 | 21 | 1. 安装渲染器 22 | 23 | ```shell 24 | npm install --save drip-table 25 | ``` 26 | 27 | ### 快速上手 28 | 29 | 1. 引入依赖 30 | 31 | ```js | pure 32 | import React from 'react'; 33 | import DripTable from 'drip-table'; 34 | import 'drip-table/dist/index.min.css'; 35 | ``` 36 | 37 | 2. 创建组件实例 38 | 39 | ```js | pure 40 | export default Demo = () => { 41 | return ( 42 | 46 | ); 47 | }; 48 | ``` 49 | -------------------------------------------------------------------------------- /docs/drip-table/schema/bordered.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 边框 bordered 3 | toc: content 4 | --- 5 | 6 | ## 边框 bordered 7 | 8 | - 描述：是否展示表格边框 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | bordered: true, 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/schema/class-name.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 类名 className 3 | toc: content 4 | --- 5 | 6 | ## 自定义类名 className 7 | 8 | - 描述：自定义表格类名 9 | - 类型：`string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | className: "sample-class-name", 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | 62 | 66 | 67 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/column-hover-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列悬浮样式 columnHoverStyle 3 | toc: content 4 | --- 5 | 6 | ## 列悬浮样式 columns.columnHoverStyle 7 | 8 | - 描述：鼠标悬浮当前列时单元格样式 9 | - 类型：`Record | string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | columnHoverStyle: { 27 | background: "#2a64ff", 28 | }, 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | columnHoverStyle: { 37 | background: "#2a64ff", 38 | }, 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 43 | }, 44 | { 45 | key: "mock_3", 46 | title: "商品价格", 47 | columnHoverStyle: "return props.recordIndex % 2 === 0 ? 'background: #00b1ff' : { background: '#d9b526' };", 48 | align: "center", 49 | dataIndex: "price", 50 | component: "text", 51 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 52 | }, 53 | ], 54 | }; 55 | 56 | const dataSource = Array(10).fill(0).map((_, i) => ({ 57 | id: i, 58 | name: "商品" + i, 59 | price: 7999, 60 | status: "onSale", 61 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 62 | })); 63 | 64 | const Demo = () => { 65 | return ( 66 | 70 | ); 71 | }; 72 | 73 | export default Demo; 74 | ``` 75 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/data-index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列索引 dataIndex 3 | toc: content 4 | --- 5 | 6 | ## 列索引 columns.dataIndex 7 | 8 | - 描述：列数据在数据项中对应的路径，支持通过数组查询嵌套路径 9 | - 类型：`string | string[]` 10 | - 默认值：必填 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { mode: "single", maxRow: 1 }, 29 | }, 30 | { 31 | key: "mock_2", 32 | title: "商品详情", 33 | align: "center", 34 | dataIndex: "description", 35 | component: "text", 36 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 37 | }, 38 | { 39 | key: "mock_3", 40 | title: "商品价格 (CNY)", 41 | width: 200, 42 | align: "center", 43 | dataIndex: ["price", "cny"], 44 | component: "text", 45 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 46 | }, 47 | { 48 | key: "mock_4", 49 | title: "商品价格 (USD)", 50 | width: 200, 51 | align: "center", 52 | dataIndex: ["price", "usd"], 53 | component: "text", 54 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 55 | }, 56 | ], 57 | }; 58 | 59 | const dataSource = Array(10).fill(0).map((_, i) => ({ 60 | id: i, 61 | name: "商品" + i, 62 | price: { cny: 7999, usd: 1192 }, 63 | status: "onSale", 64 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 65 | })); 66 | 67 | const Demo = () => { 68 | return ( 69 | 73 | ); 74 | }; 75 | 76 | export default Demo; 77 | ``` 78 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/description.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 表头描述 description 3 | toc: content 4 | --- 5 | 6 | ## 表头描述 columns.description 7 | 8 | - 描述：表头说明 9 | - 类型：`string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | width: 200, 28 | description: "商品名称就是商品的名称。", 29 | component: "text", 30 | options: { mode: "single", maxRow: 1 }, 31 | }, 32 | { 33 | key: "mock_2", 34 | title: "商品详情", 35 | align: "center", 36 | dataIndex: "description", 37 | component: "text", 38 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 39 | }, 40 | ], 41 | }; 42 | 43 | const dataSource = Array(10).fill(0).map((_, i) => ({ 44 | id: i, 45 | name: "商品" + i, 46 | price: 7999, 47 | status: "onSale", 48 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 49 | })); 50 | 51 | const Demo = () => { 52 | return ( 53 | 57 | ); 58 | }; 59 | 60 | export default Demo; 61 | ``` 62 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/disable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列禁用 disable 3 | toc: content 4 | --- 5 | 6 | ## 列禁用 columns.disable 7 | 8 | - 描述：根据行数据控制当前单元格组件是否禁用 9 | - 类型：`boolean | string` 10 | - 默认值：`false` 11 | - 说明：当传入脚本字符串控制时，可通过 `props.record` 获取当前行数据，通过 `props.recordIndex` 获取当前行号，通过 `props.value` 获取当前单元格数据。 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import { message } from "antd"; 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | disable: true, 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | disable: 'return [2, 5, 7].includes(props.record.id)', 38 | dataIndex: "description", 39 | component: "text", 40 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 41 | }, 42 | { 43 | key: "mock_3", 44 | title: "商品操作", 45 | align: "center", 46 | disable: 'return [2, 5, 7].includes(props.record.id)', 47 | dataIndex: "price", 48 | component: 'button', 49 | options: { 50 | mode: 'single', 51 | label: '新增', 52 | icon: 'PlusOutlined', 53 | }, 54 | }, 55 | ], 56 | }; 57 | 58 | const dataSource = Array(10).fill(0).map((_, i) => ({ 59 | id: i, 60 | name: "商品" + i, 61 | price: 7999, 62 | status: "onSale", 63 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 64 | })); 65 | 66 | const Demo = () => { 67 | return ( 68 | 72 | ); 73 | }; 74 | 75 | export default Demo; 76 | ``` 77 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/editable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列可编辑 editable 3 | toc: content 4 | --- 5 | 6 | ## 列可编辑 columns.editable 7 | 8 | - 描述：根据行数据控制当前单元格组件是否隐藏不可见，用于覆盖全局 [`editable`](/drip-table/schema/editable) 属性 9 | - 类型：`boolean | string` 10 | - 默认值：`false` 11 | - 说明：当传入脚本字符串控制时，可通过 `props.record` 获取当前行数据，通过 `props.recordIndex` 获取当前行号，通过 `props.value` 获取当前单元格数据。 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import { message } from "antd"; 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | editable: true, 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | editable: false, 38 | dataIndex: "description", 39 | component: "text", 40 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 41 | }, 42 | { 43 | key: "mock_3", 44 | title: "商品价格", 45 | align: "center", 46 | editable: 'return [2, 5, 7].includes(props.record.id)', 47 | dataIndex: "price", 48 | component: "text", 49 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 50 | }, 51 | ], 52 | }; 53 | 54 | const dataSource = Array(10).fill(0).map((_, i) => ({ 55 | id: i, 56 | name: "商品" + i, 57 | price: 7999, 58 | status: "onSale", 59 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 60 | })); 61 | 62 | const Demo = () => { 63 | return ( 64 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/hidden.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列隐藏 hidden 3 | toc: content 4 | --- 5 | 6 | ## 列隐藏 columns.hidden 7 | 8 | - 描述：根据行数据控制当前单元格组件是否隐藏不可见 9 | - 类型：`boolean | string` 10 | - 默认值：`false` 11 | - 说明：当传入脚本字符串控制时，可通过 `props.record` 获取当前行数据，通过 `props.recordIndex` 获取当前行号，通过 `props.value` 获取当前单元格数据。 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import { message } from "antd"; 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | dataIndex: "name", 29 | component: "text", 30 | options: { mode: "single", maxRow: 1 }, 31 | }, 32 | { 33 | key: "mock_2", 34 | title: "商品详情", 35 | align: "center", 36 | hidden: true, 37 | dataIndex: "description", 38 | component: "text", 39 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 40 | }, 41 | { 42 | key: "mock_3", 43 | title: "商品价格", 44 | align: "center", 45 | hidden: 'return [2, 5, 7].includes(props.record.id)', 46 | dataIndex: "price", 47 | component: "text", 48 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 49 | }, 50 | ], 51 | }; 52 | 53 | const dataSource = Array(10).fill(0).map((_, i) => ({ 54 | id: i, 55 | name: "商品" + i, 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | })); 60 | 61 | const Demo = () => { 62 | return ( 63 | 67 | ); 68 | }; 69 | 70 | export default Demo; 71 | ``` 72 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/hover-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 悬浮样式 hoverStyle 3 | toc: content 4 | --- 5 | 6 | ## 鼠标悬浮单元格样式 columns.hoverStyle 7 | 8 | - 描述：鼠标悬浮单元格样式 9 | - 类型：`Record | string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | hoverStyle: { 27 | background: "#2a64ff", 28 | }, 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | hoverStyle: { 37 | background: "#2a64ff", 38 | }, 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 43 | }, 44 | { 45 | key: "mock_3", 46 | title: "商品价格", 47 | hoverStyle: "return props.recordIndex % 2 === 0 ? 'background: #00b1ff' : { background: '#d9b526' };", 48 | align: "center", 49 | dataIndex: "price", 50 | component: "text", 51 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 52 | }, 53 | ], 54 | }; 55 | 56 | const dataSource = Array(10).fill(0).map((_, i) => ({ 57 | id: i, 58 | name: "商品" + i, 59 | price: 7999, 60 | status: "onSale", 61 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 62 | })); 63 | 64 | const Demo = () => { 65 | return ( 66 | 70 | ); 71 | }; 72 | 73 | export default Demo; 74 | ``` 75 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/row-hover-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 行悬浮样式 rowHoverStyle 3 | toc: content 4 | --- 5 | 6 | ## 行悬浮样式 columns.rowHoverStyle 7 | 8 | - 描述：鼠标悬浮当前行时单元格样式 9 | - 类型：`Record | string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | rowHoverStyle: { 27 | background: "#2a64ff", 28 | }, 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | rowHoverStyle: { 37 | background: "#2a64ff", 38 | }, 39 | align: "center", 40 | dataIndex: "description", 41 | component: "text", 42 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 43 | }, 44 | { 45 | key: "mock_3", 46 | title: "商品价格", 47 | rowHoverStyle: "return props.recordIndex % 2 === 0 ? 'background: #00b1ff' : { background: '#d9b526' };", 48 | align: "center", 49 | dataIndex: "price", 50 | component: "text", 51 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 52 | }, 53 | ], 54 | }; 55 | 56 | const dataSource = Array(10).fill(0).map((_, i) => ({ 57 | id: i, 58 | name: "商品" + i, 59 | price: 7999, 60 | status: "onSale", 61 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 62 | })); 63 | 64 | const Demo = () => { 65 | return ( 66 | 70 | ); 71 | }; 72 | 73 | export default Demo; 74 | ``` 75 | -------------------------------------------------------------------------------- /docs/drip-table/schema/columns/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 单元格样式 style 3 | toc: content 4 | --- 5 | 6 | ## 单元格样式 columns.style 7 | 8 | - 描述：单元格样式 9 | - 类型：`Record | string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | style: { 'border-right': "1px solid black" }, 28 | component: "text", 29 | options: { mode: "single", maxRow: 1 }, 30 | }, 31 | { 32 | key: "mock_2", 33 | title: "商品详情", 34 | style: "return props.recordIndex % 2 === 0 ? 'border-top: 1px solid black; border-bottom: none' : { 'border-top': 'none', borderBottom: '1px solid black' };", 35 | align: "center", 36 | dataIndex: "description", 37 | component: "text", 38 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 39 | }, 40 | { 41 | key: "mock_3", 42 | title: "商品价格", 43 | style: { borderLeft: "1px solid black" }, 44 | align: "center", 45 | dataIndex: "price", 46 | component: "text", 47 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = Array(10).fill(0).map((_, i) => ({ 53 | id: i, 54 | name: "商品" + i, 55 | price: 7999, 56 | status: "onSale", 57 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 58 | })); 59 | 60 | const Demo = () => { 61 | return ( 62 | 66 | ); 67 | }; 68 | 69 | export default Demo; 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/drip-table/schema/editable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 可编辑 editable 3 | toc: content 4 | --- 5 | 6 | ## 可编辑 editable 7 | 8 | - 描述：是否支持数据编辑 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | - 注意：仅部分组件支持数据编辑 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import React from "react"; 20 | import DripTable from "drip-table"; 21 | 22 | const schema = { 23 | editable: true, 24 | columns: [ 25 | { 26 | key: "mock_1", 27 | title: "商品名称", 28 | dataIndex: "name", 29 | component: "text", 30 | options: { mode: "single", maxRow: 1 }, 31 | }, 32 | { 33 | key: "mock_2", 34 | title: "商品详情", 35 | align: "center", 36 | dataIndex: "description", 37 | component: "text", 38 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 39 | }, 40 | ], 41 | }; 42 | 43 | const dataSource = Array(10).fill(0).map((_, i) => ({ 44 | id: i, 45 | name: "商品" + i, 46 | price: 7999, 47 | status: "onSale", 48 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 49 | })); 50 | 51 | const Demo = () => { 52 | return ( 53 | 58 | ); 59 | }; 60 | 61 | export default Demo; 62 | ``` 63 | -------------------------------------------------------------------------------- /docs/drip-table/schema/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 尾部 footer 3 | toc: content 4 | --- 5 | 6 | ## 表格尾部配置 footer 7 | 8 | - 描述：表格尾部展示配置 9 | - 说明：基本等同 [表格头部展示配置](/drip-table/schema/header)，唯一区别是尾部展示配置仅支持传入具体配置表，不支持传入 `boolean` 类型，详细参见：[`DripTableSlot 通用插槽功能`](/drip-table/slot)。 10 | 11 | ```jsx 12 | /** 13 | * transform: true 14 | * defaultShowCode: true 15 | * hideActions: ["CSB"] 16 | */ 17 | import React from "react"; 18 | import DripTable from "drip-table"; 19 | 20 | const schema = { 21 | footer: { 22 | style: { 23 | height: "50px", 24 | background: "#dfe8ff", 25 | border: "1px solid #dfe8ff", 26 | }, 27 | elements: [{ 28 | type: 'html', 29 | html: '自定义富文本样例', 30 | }], 31 | }, 32 | columns: [ 33 | { 34 | key: "mock_1", 35 | title: "商品名称", 36 | dataIndex: "name", 37 | component: "text", 38 | hidable: true, 39 | options: { 40 | mode: "single", 41 | maxRow: 1, 42 | }, 43 | }, 44 | { 45 | key: "mock_2", 46 | title: "商品详情", 47 | align: "center", 48 | dataIndex: "description", 49 | component: "text", 50 | hidable: true, 51 | options: { 52 | mode: "single", 53 | ellipsis: true, 54 | maxRow: 1, 55 | }, 56 | }, 57 | ], 58 | }; 59 | 60 | const dataSource = [ 61 | { 62 | id: 1, 63 | name: "商品一", 64 | price: 7999, 65 | status: "onSale", 66 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 67 | }, 68 | ]; 69 | 70 | const Demo = () => { 71 | return ( 72 | 76 | ); 77 | }; 78 | 79 | export default Demo; 80 | ``` 81 | -------------------------------------------------------------------------------- /docs/drip-table/schema/inner-class-name.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 内部类名 innerClassName 3 | toc: content 4 | --- 5 | 6 | ## 内部组件类名 innerClassName 7 | 8 | - 描述：内部表格组件类名 9 | - 类型：`string` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | innerClassName: "sample-class-name", 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | 62 | 66 | 67 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/schema/inner-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 内部样式 innerStyle 3 | toc: content 4 | --- 5 | 6 | ## 内部组件样式 innerStyle 7 | 8 | - 描述：内部表格组件样式 9 | - 类型：`React.CSSProperties` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | innerStyle: { 23 | background: "#7088ca", 24 | border: "1px solid #7088ca", 25 | }, 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/schema/row-draggable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 行可拖拽 rowDraggable 3 | toc: content 4 | --- 5 | 6 | ## 行可拖拽 rowDraggable 7 | 8 | - 描述：是否支持行拖拽 9 | 10 | - 类型：`boolean` 11 | 12 | - 默认值：`false` 13 | 14 | ```jsx 15 | /** 16 | * transform: true 17 | * defaultShowCode: true 18 | * hideActions: ["CSB"] 19 | */ 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | rowDraggable: true, 25 | columns: [ 26 | { 27 | key: "mock_1", 28 | title: "商品名称", 29 | dataIndex: "name", 30 | component: "text", 31 | options: { mode: "single", maxRow: 1 }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 40 | }, 41 | ], 42 | }; 43 | 44 | const Demo = () => { 45 | const [dataSource, setDataSource] = React.useState( 46 | Array(10).fill(0).map((_, i) => ({ 47 | id: i, 48 | name: "商品" + i, 49 | price: 7999, 50 | status: "onSale", 51 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 52 | })), 53 | ); 54 | return ( 55 | (ds) => { setDataSource(ds); }, [])} 60 | /> 61 | ); 62 | }; 63 | 64 | export default Demo; 65 | ``` 66 | -------------------------------------------------------------------------------- /docs/drip-table/schema/row-height.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 行高 rowHeight 3 | toc: content 4 | --- 5 | 6 | ## 行高 rowHeight 7 | 8 | - 描述：表格行高（虚拟滚动） 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | virtual: true, 23 | scroll: { 24 | y: 500, 25 | }, 26 | rowHeight: 100, 27 | pagination: false, 28 | rowSelection: { 29 | align: 'center', 30 | verticalAlign: 'stretch', 31 | }, 32 | columns: [ 33 | { 34 | key: "mock_1", 35 | title: "商品名称", 36 | width: 200, 37 | align: "center", 38 | dataIndex: "name", 39 | component: "text", 40 | verticalAlign: 'middle', 41 | options: { mode: "single", maxRow: 1 }, 42 | }, 43 | { 44 | key: "mock_2", 45 | title: "商品详情", 46 | align: "center", 47 | dataIndex: "description", 48 | component: "text", 49 | verticalAlign: 'middle', 50 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 51 | }, 52 | ], 53 | }; 54 | 55 | const dataSource = Array(100000).fill(0).map((_, i) => ({ 56 | id: i, 57 | name: "商品" + i, 58 | price: 7999, 59 | status: "onSale", 60 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 61 | })); 62 | 63 | const Demo = () => { 64 | return ( 65 | 69 | ); 70 | }; 71 | 72 | export default Demo; 73 | ``` 74 | -------------------------------------------------------------------------------- /docs/drip-table/schema/row-key.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 行主键 rowKey 3 | toc: content 4 | --- 5 | 6 | ## 行主键 rowKey 7 | 8 | - 描述：表格行主键 9 | - 类型：`string` 10 | - 默认值：`"key"` 11 | - 说明：一般用于配合表格勾选项 [`header.rowSelection`](/drip-table/header/row-selection)、[`props.onRowSelectionChange`](/drip-table/props.onRowSelectionChange) 属性使用。 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import { message } from "antd"; 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | 23 | const schema = { 24 | rowKey: "id", 25 | rowSelection: true, 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { mode: "single", maxRow: 1 }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 41 | }, 42 | ], 43 | }; 44 | 45 | const dataSource = Array(50).fill(0).map((_, i) => ({ 46 | id: i, 47 | name: "商品" + i, 48 | price: 7999, 49 | status: "onSale", 50 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 51 | })); 52 | 53 | const Demo = () => { 54 | return ( 55 | { 59 | message.info(selectedRows.length ? `选中商品：KEYS(${selectedKeys.join(', ')})。` : '未选中商品。'); 60 | console.log({ selectedKeys, selectedRows }); 61 | }} 62 | /> 63 | ); 64 | }; 65 | 66 | export default Demo; 67 | ``` 68 | -------------------------------------------------------------------------------- /docs/drip-table/schema/row-selection.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 行可选择 rowSelection 3 | toc: content 4 | --- 5 | 6 | ## 行可选择 rowSelection 7 | 8 | - 描述：是否支持选择栏 9 | 10 | - 类型： 11 | 12 | ```typescript 13 | type RowSelection = boolean | { 14 | /** 15 | * 选择栏水平对齐方式 16 | */ 17 | align?: 'left' | 'center' | 'right'; 18 | /** 19 | * 选择栏垂直对齐方式 20 | */ 21 | verticalAlign?: 'top' | 'middle' | 'bottom' | 'stretch'; 22 | }; 23 | ``` 24 | 25 | - 默认值：`false` 26 | 27 | ```jsx 28 | /** 29 | * transform: true 30 | * defaultShowCode: true 31 | * hideActions: ["CSB"] 32 | */ 33 | import React from "react"; 34 | import DripTable from "drip-table"; 35 | 36 | const schema = { 37 | rowSelection: true, 38 | columns: [ 39 | { 40 | key: "mock_1", 41 | title: "商品名称", 42 | dataIndex: "name", 43 | component: "text", 44 | options: { mode: "single", maxRow: 1 }, 45 | }, 46 | { 47 | key: "mock_2", 48 | title: "商品详情", 49 | align: "center", 50 | dataIndex: "description", 51 | component: "text", 52 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 53 | }, 54 | ], 55 | }; 56 | 57 | const dataSource = Array(10).fill(0).map((_, i) => ({ 58 | id: i, 59 | name: "商品" + i, 60 | price: 7999, 61 | status: "onSale", 62 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 63 | })); 64 | 65 | const Demo = () => { 66 | return ( 67 | 72 | ); 73 | }; 74 | 75 | export default Demo; 76 | ``` 77 | -------------------------------------------------------------------------------- /docs/drip-table/schema/show-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 显示表头 showHeader 3 | toc: content 4 | --- 5 | 6 | ## 显示表头 showHeader 7 | 8 | - 描述：是否显示表头 9 | - 类型：`boolean` 10 | - 默认值：`true` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | showHeader: false, 23 | columns: [ 24 | { 25 | key: "mock_1", 26 | title: "商品名称", 27 | dataIndex: "name", 28 | component: "text", 29 | options: { 30 | mode: "single", 31 | maxRow: 1, 32 | }, 33 | }, 34 | { 35 | key: "mock_2", 36 | title: "商品详情", 37 | align: "center", 38 | dataIndex: "description", 39 | component: "text", 40 | options: { 41 | mode: "single", 42 | ellipsis: true, 43 | maxRow: 1, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | const dataSource = [ 50 | { 51 | id: 1, 52 | name: "商品一", 53 | price: 7999, 54 | status: "onSale", 55 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 56 | }, 57 | ]; 58 | 59 | const Demo = () => { 60 | return ( 61 | 65 | ); 66 | }; 67 | 68 | export default Demo; 69 | ``` 70 | -------------------------------------------------------------------------------- /docs/drip-table/schema/sticky.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 冻结表头 sticky 3 | toc: content 4 | --- 5 | 6 | ## 冻结表头 sticky 7 | 8 | - 描述：冻结表头 9 | - 类型：`boolean` 10 | - 默认值：`false` 11 | - 说明：页面如果存在导航栏或内部滚动，可能需要配合 [`props.sticky`](/drip-table/props/sticky) 属性使用。 12 | 13 | ```jsx 14 | /** 15 | * transform: true 16 | * defaultShowCode: true 17 | * hideActions: ["CSB"] 18 | */ 19 | import React from "react"; 20 | import DripTable from "drip-table"; 21 | 22 | const schema = { 23 | sticky: true, 24 | pagination: { 25 | pageSize: 50, 26 | }, 27 | columns: [ 28 | { 29 | key: "mock_1", 30 | title: "商品名称", 31 | dataIndex: "name", 32 | component: "text", 33 | options: { mode: "single", maxRow: 1 }, 34 | }, 35 | { 36 | key: "mock_2", 37 | title: "商品详情", 38 | align: "center", 39 | dataIndex: "description", 40 | component: "text", 41 | options: { mode: "single", ellipsis: true, maxRow: 1 }, 42 | }, 43 | ], 44 | }; 45 | 46 | const dataSource = Array(50).fill(0).map((_, i) => ({ 47 | id: i, 48 | name: "商品" + i, 49 | price: 7999, 50 | status: "onSale", 51 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 52 | })); 53 | 54 | const Demo = () => { 55 | return ( 56 | 61 | ); 62 | }; 63 | 64 | export default Demo; 65 | ``` 66 | -------------------------------------------------------------------------------- /docs/drip-table/schema/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 样式 style 3 | toc: content 4 | --- 5 | 6 | ## 自定义样式 style 7 | 8 | - 描述：自定义表格样式 9 | - 类型：`React.CSSProperties` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | style: { 23 | background: "#7088ca", 24 | border: "1px solid #7088ca", 25 | }, 26 | columns: [ 27 | { 28 | key: "mock_1", 29 | title: "商品名称", 30 | dataIndex: "name", 31 | component: "text", 32 | options: { 33 | mode: "single", 34 | maxRow: 1, 35 | }, 36 | }, 37 | { 38 | key: "mock_2", 39 | title: "商品详情", 40 | align: "center", 41 | dataIndex: "description", 42 | component: "text", 43 | options: { 44 | mode: "single", 45 | ellipsis: true, 46 | maxRow: 1, 47 | }, 48 | }, 49 | ], 50 | }; 51 | 52 | const dataSource = [ 53 | { 54 | id: 1, 55 | name: "商品一", 56 | price: 7999, 57 | status: "onSale", 58 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 59 | }, 60 | ]; 61 | 62 | const Demo = () => { 63 | return ( 64 | 68 | ); 69 | }; 70 | 71 | export default Demo; 72 | ``` 73 | -------------------------------------------------------------------------------- /docs/drip-table/schema/table-cell-style.md: -------------------------------------------------------------------------------- 1 | # 单元格样式 tableCellStyle 2 | 3 | - 描述：行圆角半径 4 | - 类型：`number` 5 | - 默认值：`undefined` 6 | 7 | ```jsx 8 | /** 9 | * transform: true 10 | * defaultShowCode: true 11 | * hideActions: ["CSB"] 12 | */ 13 | import React from "react"; 14 | import DripTable from "drip-table"; 15 | 16 | const schema = { 17 | bordered: true, 18 | tableCellStyle: { 19 | border: '1px solid #7088ca', 20 | background: '#f7f8fc', 21 | }, 22 | columns: [ 23 | { 24 | key: "mock_1", 25 | title: "商品名称", 26 | dataIndex: "name", 27 | component: "text", 28 | options: { 29 | mode: "single", 30 | maxRow: 1, 31 | }, 32 | }, 33 | { 34 | key: "mock_2", 35 | title: "商品详情", 36 | align: "center", 37 | dataIndex: "description", 38 | component: "text", 39 | options: { 40 | mode: "single", 41 | ellipsis: true, 42 | maxRow: 1, 43 | }, 44 | }, 45 | ], 46 | }; 47 | 48 | const dataSource = [ 49 | { 50 | id: 1, 51 | name: "商品一", 52 | price: 7999, 53 | status: "onSale", 54 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 55 | }, 56 | { 57 | id: 2, 58 | name: "商品二", 59 | price: 7999, 60 | status: "onSale", 61 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 62 | }, 63 | ]; 64 | 65 | const Demo = () => { 66 | return ( 67 | 71 | ); 72 | }; 73 | 74 | export default Demo; 75 | ``` 76 | -------------------------------------------------------------------------------- /docs/drip-table/schema/theme.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 主题配置 theme 3 | toc: content 4 | --- 5 | 6 | ## 主题配置 theme 7 | 8 | - 描述：配置主题相关 9 | - 类型：`Record` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import { message } from "antd"; 19 | import * as Icons from "@ant-design/icons"; 20 | import React from "react"; 21 | import DripTable from "drip-table"; 22 | import { initSchema, mockData } from '../../demo-data'; 23 | 24 | const schema = { 25 | theme: { 26 | primaryColor: '#FF6666', 27 | primaryActiveColor: '#FF0033', 28 | primaryShadowColor: '#FF003333', 29 | borderColor: '#CC9999', 30 | backgroundColor: '#FFCCCC', 31 | columnHeaderHoverBackgroundColor: '#990000', 32 | columnHeaderSortedBackgroundColor: '#aa0000', 33 | columnSortedBackgroundColor: '#aa0000', 34 | }, 35 | columns: initSchema.columns.filter(c => !c.component.startsWith('custom::')), 36 | pagination: initSchema.pagination, 37 | scroll: initSchema.scroll, 38 | }; 39 | 40 | const dataSource = mockData; 41 | 42 | const Demo = () => { 43 | return ( 44 | 45 | 46 | 51 | 52 | ); 53 | }; 54 | 55 | export default Demo; 56 | ``` 57 | -------------------------------------------------------------------------------- /docs/drip-table/slot/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 插槽样式 style 3 | toc: content 4 | --- 5 | 6 | ## 插槽样式 slot.style 7 | 8 | - 描述：插槽自定义样式 9 | - 类型：`React.CSSProperties` 10 | - 默认值：`undefined` 11 | 12 | ```jsx 13 | /** 14 | * transform: true 15 | * defaultShowCode: true 16 | * hideActions: ["CSB"] 17 | */ 18 | import React from "react"; 19 | import DripTable from "drip-table"; 20 | 21 | const schema = { 22 | header: { 23 | style: { 24 | height: "50px", 25 | background: "#7088ca", 26 | border: "1px solid #7088ca", 27 | }, 28 | elements: [{ type: "spacer" }], 29 | }, 30 | columns: [ 31 | { 32 | key: "mock_1", 33 | title: "商品名称", 34 | dataIndex: "name", 35 | component: "text", 36 | options: { 37 | mode: "single", 38 | maxRow: 1, 39 | }, 40 | }, 41 | { 42 | key: "mock_2", 43 | title: "商品详情", 44 | align: "center", 45 | dataIndex: "description", 46 | component: "text", 47 | options: { 48 | mode: "single", 49 | ellipsis: true, 50 | maxRow: 1, 51 | }, 52 | }, 53 | ], 54 | }; 55 | 56 | const dataSource = [ 57 | { 58 | id: 1, 59 | name: "商品一", 60 | price: 7999, 61 | status: "onSale", 62 | description: "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。", 63 | }, 64 | ]; 65 | 66 | const Demo = () => { 67 | return ( 68 | 72 | ); 73 | }; 74 | 75 | export default Demo; 76 | ``` 77 | -------------------------------------------------------------------------------- /docs/drip-table/types/column-schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 列配置项 ColumnSchema 3 | toc: content 4 | --- 5 | 6 | ## DripTableColumnSchema 7 | 8 | > 通用插槽组件渲染配置项 9 | 10 | ```typescript 11 | export interface DripTableColumnSchema = Record> { 12 | /** 13 | * 组件类型标识符，自定义开发的业务组件以`命名空间::组件名称`格式填写；通过 components 属性传入组件库实现 14 | */ 15 | component: T; 16 | /** 17 | * 对应组件类型的配置项 18 | */ 19 | options: P; 20 | /** 21 | * 唯一标识，不做展示用，React 需要的 key。 22 | */ 23 | key: string; 24 | /** 25 | * 表头，组件名 26 | */ 27 | title: string; 28 | /** 29 | * 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 30 | */ 31 | dataIndex: string | string[]; 32 | /** 33 | * 默认数据 34 | */ 35 | defaultValue?: unknown; 36 | /** 37 | * 表格列宽 38 | */ 39 | width?: string | number; 40 | /** 41 | * 表格列对齐 42 | */ 43 | align?: 'left' | 'center' | 'right'; 44 | /** 45 | * 表头说明 46 | */ 47 | description?: string; 48 | /** 49 | * 是否固定列 50 | */ 51 | fixed?: 'left' | 'right' | boolean; 52 | /** 53 | * 用户可控制该列显示隐藏 54 | */ 55 | hidable?: boolean; 56 | /** 57 | * 数据过滤器设置 58 | */ 59 | filters?: { 60 | text: React.ReactNode; 61 | value: string | number | boolean; 62 | }[]; 63 | /** 64 | * 默认数据过滤器值 65 | */ 66 | defaultFilteredValue?: React.Key[] | null; 67 | } 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/drip-table/types/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 类型 Types 3 | toc: false 4 | --- 5 | 6 | ## 类型 7 | 8 | | 参数名 | 描述 | 详情 | 9 | | ----- | ---- | ---- | 10 | | [DripTableColumnSchema](/drip-table/types/column-schema) | 通用插槽组件渲染配置项 | [🔗 示例](/drip-table/types/column-schema) | 11 | | [DripTableSlotSchema](/drip-table/types/slot-schema) | 通用插槽组件渲染配置项 | [🔗 示例](/drip-table/types/slot-schema) | 12 | | [DripTableTableInformation](/drip-table/types/table-information) | 通用表格信息 | [🔗 示例](/drip-table/types/table-information) | 13 | -------------------------------------------------------------------------------- /docs/drip-table/types/table-information.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 表格信息 TableInformation 3 | toc: content 4 | --- 5 | 6 | ## DripTableTableInformation 7 | 8 | > 通用表格信息 9 | 10 | ```typescript 11 | /** 12 | * 表格信息 13 | */ 14 | export interface DripTableTableInformation< 15 | RecordType extends DripTableRecordTypeWithSubtable>, 16 | ExtraOptions extends Partial = never, 17 | > { 18 | /** 19 | * 表格 Schema 20 | */ 21 | schema: DripTableSchema, ExtractDripTableExtraOption>; 22 | /** 23 | * 表格数据 24 | */ 25 | dataSource: readonly RecordType[]; 26 | /** 27 | * 所属数据（通常用于子表寻找父级行数据） 28 | */ 29 | record?: RecordType; 30 | /** 31 | * 表格父级信息 32 | */ 33 | parent?: DripTableTableInformation; 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/shims-styles.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | declare module '*.less'; 10 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "version": "independent", 4 | "npmClient": "yarn", 5 | "useWorkspaces": true 6 | } 7 | -------------------------------------------------------------------------------- /packages/drip-table-generator/.eslintignore: -------------------------------------------------------------------------------- 1 | # /node_modules/* and /bower_components/* ignored by default 2 | 3 | !.*.js 4 | !.*.ts 5 | *.min.js 6 | 7 | /dist 8 | -------------------------------------------------------------------------------- /packages/drip-table-generator/.fatherrc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'father'; 2 | 3 | export default defineConfig({ 4 | umd: { 5 | entry: { 6 | 'src/index': { 7 | output: 'dist', 8 | }, 9 | }, 10 | }, 11 | cjs: { 12 | platform: 'browser', 13 | output: 'lib', 14 | }, 15 | esm: { output: 'es' }, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/drip-table-generator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | /node_modules 4 | /dist 5 | /es 6 | /lib 7 | /dist-visualizer 8 | /dist-visualizer-css 9 | /.tsconfig-lint.json 10 | -------------------------------------------------------------------------------- /packages/drip-table-generator/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | module.exports = { 10 | extends: '../../.stylelintrc.js', 11 | rules: { 12 | 'selector-class-pattern': [ 13 | // Matches class name likes this: block__elem--mod or block1__elem1--mod1-block2__elem2--mod2- or block-50x50__50x50--50x50... 14 | /^(?:(?:(?:(?:^jfe-drip-table-generator-|(?!^)-)[a-z]+\d*|-[a-z]*\d+|-\d+x\d+)(?:__[a-z]+\d*|__[a-z]*\d+|__\d+x\d+){0,1}(?:--[a-z]+\d*|--[a-z]*\d+|--\d+x\d+){0,1})*)$/u, { 15 | severity: 'error', 16 | resolveNestedSelectors: true, 17 | message: 'Selector must start with "jfe-drip-table-generator-" and in BEM Naming', 18 | }, 19 | ], 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/array-list/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-array-component; 2 | 3 | .@{prefixCls} { 4 | &-container { 5 | width: 100%; 6 | } 7 | 8 | &-form-container { 9 | border: 1px solid #efefef; 10 | border-radius: 2px; 11 | padding: 0 12px; 12 | margin: 6px 0; 13 | position: relative; 14 | } 15 | 16 | &-left-container { 17 | display: inline-block; 18 | vertical-align: middle; 19 | width: ~"calc(100% - 72px)"; 20 | } 21 | 22 | &-right-container { 23 | display: inline-block; 24 | vertical-align: middle; 25 | width: 72px; 26 | text-align: center; 27 | } 28 | 29 | &-close-button { 30 | position: absolute; 31 | width: 16px; 32 | height: 16px; 33 | top: -8px; 34 | right: -8px; 35 | color: red; 36 | cursor: pointer; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/box-shadow/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-box-shadow; 2 | @prefixClsAnt: ant; 3 | 4 | .@{prefixCls}-picker-trigger { 5 | border: 1px solid #999999; 6 | display: inline-block; 7 | padding: 2px; 8 | border-radius: 2px; 9 | user-select: none; 10 | width: 34px; 11 | height: 32px; 12 | cursor: pointer; 13 | box-shadow: 0 0 0 2px #ffffff inset; 14 | margin-right: 6px; 15 | } 16 | 17 | .@{prefixCls}-container { 18 | display: flex; 19 | flex-wrap: wrap; 20 | 21 | .@{prefixCls}-item-container { 22 | display: flex; 23 | position: relative; 24 | margin-right: 8px; 25 | width: 52px; 26 | 27 | .@{prefixCls}-number-input { 28 | width: 26px; 29 | height: 32px; 30 | line-height: 30px; 31 | 32 | input { 33 | padding: 0 2px; 34 | } 35 | } 36 | 37 | .@{prefixCls}-select-input { 38 | width: 26px; 39 | height: 32px; 40 | 41 | .@{prefixClsAnt}-select-selector { 42 | padding: 0 2px; 43 | } 44 | 45 | .@{prefixClsAnt}-select-item { 46 | padding: 4px 2px; 47 | } 48 | } 49 | 50 | .@{prefixCls}-minus { 51 | position: absolute; 52 | top: -6px; 53 | right: -6px; 54 | cursor: pointer; 55 | z-index: 1; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/cascade/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : qianjing29 (qianjing29@jd.com) 5 | * @modifier : qianjing29 (qianjing29@jd.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | import { Cascader as Cascade } from 'antd'; 9 | import React from 'react'; 10 | 11 | import { DTGComponentBaseProperty } from '..'; 12 | 13 | type CascadeProps = React.ComponentProps; 14 | 15 | interface Props extends DTGComponentBaseProperty {} 16 | 17 | export default class CascadeComponent extends React.PureComponent { 18 | public static componentName = 'cascade'; 19 | 20 | public render() { 21 | const config = this.props.schema; 22 | const uiProps = this.props.schema['ui:props'] || {}; 23 | 24 | return ( 25 | { 34 | this.props.onChange?.(value); 35 | if (config.validate) { 36 | const res = config.validate(value); 37 | (res instanceof Promise ? res : Promise.resolve(res)) 38 | .then((msg) => { 39 | this.props.onValidate?.(msg); 40 | return msg; 41 | }) 42 | .catch((error: unknown) => { throw error; }); 43 | } 44 | }} 45 | /> 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-color-picker; 2 | 3 | .@{prefixCls}-trigger { 4 | border: 1px solid #999999; 5 | display: inline-block; 6 | padding: 2px; 7 | border-radius: 2px; 8 | user-select: none; 9 | width: 90px; 10 | height: 32px; 11 | cursor: pointer; 12 | box-shadow: 0 0 0 2px #ffffff inset; 13 | } 14 | 15 | @prefixClsRC: rc; 16 | 17 | // TODO: 侵入性样式，不应该这么写 18 | .@{prefixClsRC}-color-picker-wrap { 19 | display: flex !important; 20 | } 21 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : qianjing29 (qianjing29@jd.com) 5 | * @modifier : qianjing29 (qianjing29@jd.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | import { InputNumber } from 'antd'; 9 | import React from 'react'; 10 | 11 | import { DTGComponentBaseProperty } from '..'; 12 | 13 | interface Props extends DTGComponentBaseProperty { 14 | } 15 | 16 | export default class InputNumberComponent extends React.PureComponent { 17 | public static componentName = 'number'; 18 | 19 | public render() { 20 | const config = this.props.schema; 21 | const uiProps = this.props.schema['ui:props'] || {}; 22 | 23 | return ( 24 | { 34 | const formedValue = value === void 0 || value === null ? void 0 : Number(value); 35 | this.props.onChange?.(formedValue); 36 | if (config.validate) { 37 | const res = config.validate(formedValue); 38 | (res instanceof Promise ? res : Promise.resolve(res)) 39 | .then((msg) => { 40 | this.props.onValidate?.(msg); 41 | return msg; 42 | }) 43 | .catch((error: unknown) => { throw error; }); 44 | } 45 | }} 46 | /> 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/rich-text-editor/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : qianjing29 (qianjing29@jd.com) 5 | * @modifier : qianjing29 (qianjing29@jd.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-generator-rich-text-editor; 10 | @prefixClsQL: ql; 11 | 12 | .@{prefixCls}-quill-editor-container { 13 | .@{prefixClsQL}-editor { 14 | min-height: 268px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/rich-text-editor/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : qianjing29 (qianjing29@jd.com) 5 | * @modifier : qianjing29 (qianjing29@jd.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | import 'react-quill/dist/quill.snow.css'; 9 | import './index.less'; 10 | 11 | import React from 'react'; 12 | import ReactQuill from 'react-quill'; 13 | 14 | import { DTGComponentBaseProperty } from '..'; 15 | 16 | interface Props extends DTGComponentBaseProperty {} 17 | 18 | export default class RichTextEditorComponent extends React.PureComponent { 19 | public static componentName = 'rich-text-editor'; 20 | 21 | public get modules() { 22 | return { 23 | toolbar: [ 24 | [{ font: [] }, { size: [] }], 25 | [{ align: [] }, 'direction'], 26 | ['bold', 'italic', 'underline', 'strike'], 27 | [{ color: [] }, { background: [] }], 28 | [{ script: 'super' }, { script: 'sub' }], 29 | ['blockquote', 'code-block'], 30 | [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }], 31 | ['link', 'image', 'video'], 32 | ['clean'], 33 | ], 34 | }; 35 | } 36 | 37 | public render() { 38 | const uiProps = this.props.schema['ui:props'] || {}; 39 | 40 | return ( 41 |
42 | { 48 | this.props.onChange?.(value); 49 | }} 50 | /> 51 |
52 | ); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/components/style-numbers/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-style-numbers; 2 | @prefixClsAnt: ant; 3 | 4 | .@{prefixCls}-component-container { 5 | display: flex; 6 | flex-wrap: wrap; 7 | 8 | .@{prefixCls}-item-container { 9 | display: flex; 10 | position: relative; 11 | width: 64px; 12 | margin-right: 8px; 13 | 14 | .@{prefixCls}-number-input { 15 | width: 38px; 16 | height: 32px; 17 | line-height: 30px; 18 | 19 | input { 20 | padding: 0 2px; 21 | } 22 | } 23 | 24 | .@{prefixCls}-select-input { 25 | width: 26px; 26 | height: 32px; 27 | 28 | .@{prefixClsAnt}-select-selector { 29 | padding: 0 2px; 30 | } 31 | 32 | .@{prefixClsAnt}-select-item { 33 | padding: 4px 2px; 34 | } 35 | } 36 | 37 | .@{prefixCls}-minus { 38 | position: absolute; 39 | top: -6px; 40 | right: -6px; 41 | cursor: pointer; 42 | z-index: 1; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/CustomForm/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-generator-custom-form; 10 | @prefixClsAnt: ant; 11 | 12 | .@{prefixCls}-item { 13 | .@{prefixClsAnt}-form-item-label { 14 | white-space: break-spaces; 15 | word-break: break-word; 16 | } 17 | 18 | .@{prefixClsAnt}-form-item-label > label { 19 | height: 100%; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/components/Draggable/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-draggable; 2 | 3 | .@{prefixCls} { 4 | &-container { 5 | display: flex; 6 | flex-flow: row wrap; 7 | min-width: 800px; 8 | } 9 | 10 | &-droppedcontent { 11 | border: 0 solid transparent; 12 | } 13 | 14 | &-droppingcontent { 15 | border: 1px dashed #0a7bde; 16 | box-shadow: 0 0 8px #0a7bdecc; 17 | padding: 6px; 18 | background-color: #fafafa; 19 | border-radius: 5%; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/context/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | import { DripTableExtraOptions, DripTableRecordTypeBase, DripTableRecordTypeWithSubtable, ExtractDripTableExtraOption } from 'drip-table'; 9 | import { createContext } from 'react'; 10 | 11 | export type DripTableGeneratorStates = Omit; 12 | 13 | export interface DripTableGeneratorContext { 14 | /** 15 | * 当前选中的表格ID 16 | */ 17 | currentTableID?: string; 18 | currentColumnID?: string; 19 | currentHoverColumnID?: string; 20 | /** 21 | * 获取当前选中的子组件的路径 22 | */ 23 | currentComponentPath?: (number | 'popover' | 'content')[]; 24 | currentComponentID?: string; 25 | /** 26 | * 表格数据，generator 不解析具体数据结构，仅仅透传给 drip-table 27 | */ 28 | previewDataSource: DripTableRecordTypeWithSubtable, 'SubtableDataSourceKey'>>[]; 29 | /** 30 | * 属性栏类型，根据类型展示不同的抽屉 31 | */ 32 | drawerType?: 'table' | 'column' | 'column-item'; 33 | /** 34 | * 表格工作区展示模式 35 | */ 36 | mode: 'edit' | 'preview'; 37 | /** 38 | * 更新 Context 方法 39 | */ 40 | setState: ( 41 | states: Partial, 42 | callback?: (states?: DripTableGeneratorStates) => void 43 | ) => void; 44 | } 45 | 46 | export const GeneratorContext = createContext({ 47 | previewDataSource: [], 48 | mode: 'edit', 49 | setState: () => false, 50 | }); 51 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/index.less'; 2 | import './styles/theme.less'; 3 | 4 | export * from './typing'; 5 | 6 | export type { GeneratorWrapperHandler as DripTableGeneratorHandler } from './wrapper'; 7 | 8 | export { default as DTGForm } from './components/CustomForm'; 9 | 10 | export { default as DTGBuiltInComponentProps } from './table-components'; 11 | 12 | export { default as DTGComponentConfigsForm } from './layouts/attributes-layout/component-configs'; 13 | export { default as DTGTableConfigsForm } from './layouts/attributes-layout/global-configs'; 14 | export { default as DTGComponentItemConfigForm } from './layouts/attributes-layout/component-item-config'; 15 | 16 | export { getGroups, getComponentsConfigs } from './layouts/utils'; 17 | 18 | export { default } from './wrapper'; 19 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/attributes-layout/component-item-config/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-component-item-config; 2 | @prefixClsAnt: ant; 3 | 4 | .@{prefixCls}-result { 5 | .@{prefixClsAnt}-result-icon svg { 6 | font-size: 72px; 7 | } 8 | 9 | .@{prefixClsAnt}-result-title > div { 10 | font-size: 24px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/attributes-layout/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | @prefixCls: jfe-drip-table-generator-attributes-layout; 9 | 10 | .@{prefixCls}-attributes-drawer { 11 | display: flex; 12 | flex-direction: column; 13 | width: 420px; 14 | height: 100%; 15 | position: absolute; 16 | right: 0; 17 | background: #ffffff; 18 | box-shadow: -1px 1px 4px -1px rgb(~"0 0 0 / 25%"); 19 | transition: all ease-in-out .3s; 20 | 21 | * { font-size: 12px; } 22 | 23 | &.radius { 24 | border-radius: 0 0 8px; 25 | } 26 | 27 | &-fixed { 28 | position: relative; 29 | } 30 | 31 | &-header { 32 | display: flex; 33 | flex: 0; 34 | align-items: center; 35 | padding: 8px 12px; 36 | font-size: 16px; 37 | line-height: 22px; 38 | border-bottom: 1px solid rgb(~"0 0 0 / 6%"); 39 | 40 | button { 41 | margin-right: 12px; 42 | color: #00000073; 43 | } 44 | 45 | button:hover { 46 | color: #000000bf; 47 | text-decoration: none; 48 | } 49 | 50 | .@{prefixCls}-title { 51 | flex: 1; 52 | margin: 0; 53 | color: #000000d9; 54 | font-weight: 500; 55 | font-size: 16px; 56 | line-height: 22px; 57 | } 58 | 59 | .@{prefixCls}-component-title { 60 | color: #87888a; 61 | font-size: 14px; 62 | font-weight: normal; 63 | } 64 | } 65 | 66 | &-body { 67 | flex: 1; 68 | min-width: 0; 69 | min-height: 0; 70 | padding: 16px 12px; 71 | overflow: auto; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-generator-layouts; 10 | 11 | .@{prefixCls}-model-container { 12 | height: 640px; 13 | position: relative; 14 | background-color: #ffffff; 15 | background-clip: padding-box; 16 | border: 0; 17 | border-radius: 8px; 18 | box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); 19 | pointer-events: auto; 20 | padding: 0; 21 | } 22 | 23 | .@{prefixCls}-container { 24 | min-width: 100px; 25 | width: 100%; 26 | position: relative; 27 | } 28 | 29 | .@{prefixCls}-navbar { 30 | width: 136px; 31 | height: 100%; 32 | overflow: hidden; 33 | box-shadow: 1px 1px 4px -1px rgb(~"0 0 0 / 25%"); 34 | z-index: 1; 35 | } 36 | 37 | .@{prefixCls}-wrapper { 38 | display: flex; 39 | height: calc(~"100% - 53px"); 40 | position: relative; 41 | padding: 0 8px; 42 | overflow: hidden; 43 | 44 | &.full { 45 | height: 100%; 46 | } 47 | } 48 | 49 | .@{prefixCls}-table-workstation { 50 | width: 100%; 51 | overflow: auto; 52 | height: 100%; 53 | 54 | &.fixed { 55 | width: calc(~"100% - 420px"); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/components/pagination/dom.ts: -------------------------------------------------------------------------------- 1 | export const parseReactCSS = (style: string | Record): React.CSSProperties => { 2 | if (typeof style === 'string') { 3 | style = Object.fromEntries( 4 | style 5 | .split(';') 6 | .map( 7 | line => line 8 | .split(':') 9 | .map(s => s.trim()), 10 | ) 11 | .filter(([k, v]) => k && v), 12 | ); 13 | } 14 | return typeof style === 'object' && style 15 | ? Object.fromEntries( 16 | Object.entries(style) 17 | .map(([k, v]) => [k.replace(/-[a-z]/ug, s => `${s.slice(1).toUpperCase()}`), v]), 18 | ) 19 | : {}; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/add-column/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @import url("../../../../../styles/index.less"); 10 | 11 | @prefixCls: jfe-drip-table-generator-workstation-table-header; 12 | 13 | .@{prefixCls}-add-item { 14 | color: #000000d9; 15 | font-weight: 500; 16 | background: #f5f5f5; 17 | border-top: 1px solid transparent; 18 | border-bottom: 1px solid #e0e0e0; 19 | transition: all .3s ease; 20 | height: 48px; 21 | padding: 0 12px; 22 | min-width: 120px; 23 | text-align: center; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | 28 | &.small { 29 | height: 35px; 30 | padding: 0 8px; 31 | } 32 | 33 | &.middle, 34 | &.default { 35 | height: 48px; 36 | padding: 0 12px; 37 | } 38 | 39 | &.large { 40 | height: 56px; 41 | padding: 0 16px; 42 | } 43 | 44 | &.sticky { 45 | position: sticky; 46 | top: 0; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/components-selector/configs.ts: -------------------------------------------------------------------------------- 1 | export const defaultComponentIcon = ` 2 | 3 | `; 4 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @import url("../../../styles/index.less"); 10 | 11 | @prefixCls: jfe-drip-table-generator-workstation-table; 12 | 13 | .@{prefixCls}-wrapper { 14 | border-radius: 2px; 15 | width: max-content; 16 | 17 | &.bordered { 18 | border: 1px solid #efefef; 19 | } 20 | } 21 | 22 | .@{prefixCls}-row { 23 | border: 1px solid transparent; 24 | border-bottom: 1px solid #efefef; 25 | position: relative; 26 | outline: none; 27 | 28 | // &:hover { 29 | // background-color: #efefef; 30 | // border: 1px dashed var(--drip-table-border-color, @border-color); 31 | // } 32 | 33 | &.stripe { 34 | background-color: #efefef; 35 | } 36 | 37 | &.checked { 38 | border: 1px solid var(--drip-table-border-color, @border-color); 39 | } 40 | 41 | &.disabled { 42 | border: none; 43 | } 44 | } 45 | 46 | .@{prefixCls}-row-tools { 47 | position: absolute; 48 | top: 0; 49 | left: -1px; 50 | display: flex; 51 | padding: 2px 4px; 52 | background-color: var(--drip-table-primary-color, @primary-color); 53 | color: #ffffff; 54 | box-shadow: 1px 1px 4px -1px rgb(0 0 0 / 85%); 55 | } 56 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-generator-workstation; 10 | 11 | .@{prefixCls}-wrapper { 12 | &.edit { 13 | min-width: 100%; 14 | width: max-content; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/table-workstation/table-preview/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-generator-workstation-table-preview; 2 | 3 | .@{prefixCls}-wrapper { 4 | overflow: auto; 5 | width: 100%; 6 | height: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/toolbar/components/corner/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @import url("../../../../styles/index.less"); 10 | 11 | @prefixCls: jfe-drip-table-generator-corner; 12 | 13 | .@{prefixCls}-front { 14 | position: absolute; 15 | border-radius: 50%; 16 | background: #ffffff; 17 | overflow: hidden; 18 | 19 | &.topLeft { 20 | left: 0; 21 | top: 0; 22 | } 23 | 24 | &.topRight { 25 | right: 0; 26 | top: 0; 27 | } 28 | 29 | &.bottomLeft { 30 | bottom: 0; 31 | left: 0; 32 | } 33 | 34 | &.bottomRight { 35 | bottom: 0; 36 | right: 0; 37 | } 38 | } 39 | 40 | .@{prefixCls}-background { 41 | position: relative; 42 | overflow: hidden; 43 | background: var(--drip-table-primary-color, @primary-color); 44 | } 45 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/toolbar/components/corner/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | import './index.less'; 9 | 10 | import classNames from 'classnames'; 11 | import React from 'react'; 12 | 13 | export interface CornerProps { 14 | size?: number; 15 | style?: React.CSSProperties; 16 | position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; 17 | } 18 | function Corner(props: CornerProps) { 19 | return ( 20 |
24 |
28 |
29 | ); 30 | } 31 | 32 | export default Corner; 33 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/toolbar/components/dropdown-button/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @import url("../../../../styles/index.less"); 10 | 11 | @prefixCls: jfe-drip-table-generator-dropdown; 12 | 13 | .@{prefixCls}-wrapper { 14 | display: inline-block; 15 | } 16 | 17 | .@{prefixCls}-button { 18 | background-color: var(--drip-table-primary-color, @primary-color); 19 | border-color: var(--drip-table-border-color, @border-color); 20 | box-shadow: 0 -2px 4px -2px rgb(0 0 0 / 57%); 21 | 22 | &:hover, 23 | &:focus { 24 | background-color: var(--drip-table-primary-color, @primary-color); 25 | border-color: var(--drip-table-border-color, @border-color); 26 | } 27 | } 28 | 29 | .@{prefixCls}-arrow { 30 | height: 10px; 31 | background-color: var(--drip-table-primary-color, @primary-color); 32 | position: absolute; 33 | width: 73px; 34 | } 35 | 36 | .@{prefixCls}-connector { 37 | position: absolute; 38 | bottom: 0; 39 | transition: all ease-in-out .25s; 40 | } 41 | 42 | .@{prefixCls}-body { 43 | position: absolute; 44 | background: #ffffff; 45 | border-top: 1px solid var(--drip-table-border-color, @border-color); 46 | padding: 10px; 47 | margin-top: 10px; 48 | left: 0; 49 | border-radius: 0 0 8px 8px; 50 | z-index: 10; 51 | 52 | &.page-mode { 53 | box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/toolbar/components/templates-manager/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-generator-templates; 10 | 11 | .@{prefixCls}-manager { 12 | height: 100%; 13 | position: relative; 14 | } 15 | 16 | .@{prefixCls}-tools { 17 | position: absolute; 18 | bottom: 0; 19 | text-align: right; 20 | width: 100%; 21 | } 22 | 23 | .@{prefixCls}-table-header { 24 | color: #5c6b77; 25 | font-weight: 500; 26 | white-space: nowrap; 27 | background: rgb(0 0 0 / 2%); 28 | border-left: 1px solid rgb(5 5 5 / 6%); 29 | padding: 12px 24px; 30 | text-align: left; 31 | font-size: 14px; 32 | } 33 | 34 | .@{prefixCls}-cell { 35 | border-left: 1px solid rgb(5 5 5 / 6%); 36 | } 37 | 38 | .@{prefixCls}-cell-index { 39 | text-align: center; 40 | line-height: 32px; 41 | } 42 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/layouts/toolbar/templates/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import { DripTableColumnSchema, DripTableSchema } from 'drip-table'; 10 | 11 | import { basicTableTemplates } from './basic-table'; 12 | import { editableTableTemplate } from './editable-table'; 13 | import { groupTableTemplate } from './group-table'; 14 | import { proTableTemplate } from './pro-table'; 15 | import { subTableTemplate } from './sub-table'; 16 | 17 | export interface DripTableGeneratorTemplate { 18 | /** 19 | * 唯一标识 20 | */ 21 | key: string; 22 | /** 23 | * 模板名称 24 | */ 25 | label: string; 26 | /** 27 | * 预览图 28 | */ 29 | previewImg: string; 30 | /** 31 | * 模板关联配置 32 | */ 33 | schema: DripTableSchema; 34 | } 35 | 36 | export const DTGBuiltInTemplates: DripTableGeneratorTemplate[] = [ 37 | basicTableTemplates, 38 | editableTableTemplate, 39 | subTableTemplate, 40 | proTableTemplate, 41 | groupTableTemplate, 42 | ]; 43 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/shims-styles.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | declare module '*.less'; 10 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/shims-window.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | declare interface Window { 10 | mockCount: number; 11 | } 12 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/styles/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | @primary-color: #3b82f6; 9 | @link-color: #3b82f6; 10 | @primary-color-darker: #0958d9; 11 | @background-color: #e6f7ff; 12 | @border-color: #3b82f6; 13 | @button-hover-color: #4288f6; 14 | @shadow-color: rgb(24 144 255 / 20%); 15 | @select-option-selected-color: #e6f7ff; 16 | @success-color: #52c41a; 17 | @warning-color: #faad14; 18 | @error-color: #f5222d; 19 | @font-size-base: 14px; 20 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/table-components/index.ts: -------------------------------------------------------------------------------- 1 | import { DripTableComponentAttrConfig } from '../typing'; 2 | import button from './button'; 3 | import checkbox from './checkbox'; 4 | import datePicker from './date-picker'; 5 | import group from './group'; 6 | import icon from './icon'; 7 | import inputNumber from './input-number'; 8 | import links from './links'; 9 | import image from './picture'; 10 | import popUpPage from './pop-up-page'; 11 | import popover from './popover'; 12 | import renderHtml from './render-html'; 13 | import renderHtmlRemote from './render-html-remote'; 14 | import richText from './rich-text'; 15 | import select from './select'; 16 | import status from './status'; 17 | import switchConfig from './switch'; 18 | import tag from './tag'; 19 | import text from './text'; 20 | 21 | const baseComponentList: DripTableComponentAttrConfig[] = [ 22 | text, 23 | image, 24 | links, 25 | tag, 26 | button, 27 | select, 28 | datePicker, 29 | popUpPage, 30 | inputNumber, 31 | switchConfig, 32 | checkbox, 33 | icon, 34 | popover, 35 | status, 36 | ]; 37 | 38 | const containerComponentList: DripTableComponentAttrConfig[] = [ 39 | group, 40 | ]; 41 | 42 | const customComponentList: DripTableComponentAttrConfig[] = [ 43 | renderHtml, 44 | renderHtmlRemote, 45 | richText, 46 | ]; 47 | 48 | export default [ 49 | ...baseComponentList, 50 | ...containerComponentList, 51 | ...customComponentList, 52 | ] as DripTableComponentAttrConfig[]; 53 | -------------------------------------------------------------------------------- /packages/drip-table-generator/src/utils/enum.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : helloqian12138 (johnhello12138@163.com) 5 | * @modifier : helloqian12138 (johnhello12138@163.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | export const drawerWidth = { 9 | datasource: 680, 10 | global: 480, 11 | column: 480, 12 | 'column-item': 480, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/drip-table-generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": "./", 6 | "declaration": true, 7 | "emitDecoratorMetadata": true, 8 | "esModuleInterop": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "isolatedModules": false, 12 | "jsx": "react", 13 | "jsxFactory": "React.createElement", 14 | "lib": ["dom", "esnext"], 15 | "listFiles": true, 16 | "module": "ESNext", 17 | "moduleResolution": "node", 18 | "noEmit": false, 19 | "noImplicitAny": false, 20 | "noImplicitReturns": true, 21 | "noImplicitThis": true, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": false, 24 | "outDir": "dist", 25 | "paths": { 26 | "@/*": ["src/*"], 27 | "@@/*": ["src/.umi/*"] 28 | }, 29 | "removeComments": false, 30 | "sourceMap": true, 31 | "strict": true, 32 | "strictNullChecks": true, 33 | "suppressImplicitAnyIndexErrors": true, 34 | "target": "ESNext", 35 | "types": ["node"] 36 | }, 37 | "include": ["src"] 38 | } 39 | -------------------------------------------------------------------------------- /packages/drip-table/.eslintignore: -------------------------------------------------------------------------------- 1 | # /node_modules/* and /bower_components/* ignored by default 2 | 3 | !.*.js 4 | !.*.ts 5 | *.min.js 6 | 7 | /dist 8 | -------------------------------------------------------------------------------- /packages/drip-table/.fatherrc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'father'; 2 | import path from 'path'; 3 | import TerserWebpackPlugin from 'terser-webpack-plugin'; 4 | 5 | export default defineConfig({ 6 | alias: { 7 | '@@drip-table-src': path.resolve(__dirname, 'src/'), 8 | }, 9 | umd: { 10 | entry: { 11 | 'src/index': { 12 | output: 'dist', 13 | }, 14 | }, 15 | chainWebpack(config, { webpack }) { 16 | config.entry('index').add(path.join(__dirname, './src/index.ts')); 17 | config.entry('index.min').add(path.join(__dirname, './src/index.ts')); 18 | config.optimization.minimizer('css').use(TerserWebpackPlugin, [{ 19 | test: /min/u, 20 | terserOptions: { 21 | module: true, 22 | }, 23 | minify: v => new Promise(resolve => resolve({ code: v.value })), 24 | }]); 25 | return config; 26 | }, 27 | }, 28 | cjs: { 29 | platform: 'browser', 30 | output: 'lib', 31 | }, 32 | esm: { output: 'es' }, 33 | }); 34 | -------------------------------------------------------------------------------- /packages/drip-table/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | /node_modules 4 | /dist 5 | /es 6 | /lib 7 | /dist-visualizer 8 | /dist-visualizer-css 9 | /.tsconfig-lint.json 10 | -------------------------------------------------------------------------------- /packages/drip-table/.stylelintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | module.exports = { 10 | extends: '../../.stylelintrc.js', 11 | rules: { 12 | 'selector-class-pattern': [ 13 | // Matches class name likes this: block__elem--mod or block1__elem1--mod1-block2__elem2--mod2- or block-50x50__50x50--50x50... 14 | /^(?:(?:(?:(?:^jfe-drip-table-|(?!^)-)[a-z]+\d*|-[a-z]*\d+|-\d+x\d+)(?:__[a-z]+\d*|__[a-z]*\d+|__\d+x\d+){0,1}(?:--[a-z]+\d*|--[a-z]*\d+|--\d+x\d+){0,1})*)$/u, { 15 | severity: 'error', 16 | resolveNestedSelectors: true, 17 | message: 'Selector must start with "jfe-drip-table-" and in BEM Naming', 18 | }, 19 | ], 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/drip-table/post-build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | // 替换函数 5 | function replaceInFile(filePath, srcDir) { 6 | fs.readFile(filePath, 'utf8', (err1, data) => { 7 | if (err1) { 8 | console.error(`Error reading file ${filePath}: ${err1}`); 9 | return; 10 | } 11 | 12 | // 计算替换字符串 13 | const relativePath = path.relative(path.dirname(filePath), srcDir) || '.'; 14 | const newPath = data.replace(/@@drip-table-src\//ug, `${relativePath}/`); 15 | 16 | // 写回文件 17 | fs.writeFile(filePath, newPath, 'utf8', (err2) => { 18 | if (err2) { 19 | console.error(`Error writing file ${filePath}: ${err2}`); 20 | } else { 21 | console.log(`File processed: ${filePath}`); 22 | } 23 | }); 24 | }); 25 | } 26 | 27 | // 递归遍历文件夹 28 | function walkDir(dir, srcDir = dir) { 29 | fs.readdir(dir, { withFileTypes: true }, (err, files) => { 30 | if (err) { 31 | console.error(`Error reading directory ${dir}: ${err}`); 32 | return; 33 | } 34 | 35 | for (const file of files) { 36 | const fullPath = path.join(dir, file.name); 37 | if (file.isDirectory()) { 38 | walkDir(fullPath, srcDir); 39 | } else if (file.isFile() && fullPath.endsWith('.less')) { 40 | replaceInFile(fullPath, srcDir); 41 | } 42 | } 43 | }); 44 | } 45 | 46 | // 开始遍历 47 | walkDir(path.join(__dirname, 'es')); 48 | walkDir(path.join(__dirname, 'lib')); 49 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/cell-components/image/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-cc-image; 2 | 3 | .@{prefixCls}-wrapper { 4 | display: inline-block; 5 | position: relative; 6 | } 7 | 8 | .@{prefixCls}-corner-mark { 9 | pointer-events: none; 10 | position: absolute; 11 | right: 0; 12 | bottom: 0; 13 | display: flex; 14 | align-items: flex-end; 15 | } 16 | 17 | .@{prefixCls}-corner-mark-body { 18 | background-color: #00000073; 19 | height: 23.9px; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .@{prefixCls}-corner-mark-text { 26 | color: #ffffff; 27 | display: inline-block; 28 | padding-left: 4px; 29 | } 30 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/cell-components/link/index.less: -------------------------------------------------------------------------------- 1 | @import url("@@drip-table-src/styles/theme/default.less"); 2 | 3 | @prefixCls: jfe-drip-table-cc-link; 4 | 5 | .@{prefixCls}-link { 6 | color: @drip-table-primary-color; 7 | } 8 | 9 | .@{prefixCls}-link:active, 10 | .@{prefixCls}-link:hover { 11 | color: @drip-table-primary-active-color; 12 | } 13 | 14 | .@{prefixCls}-link-disabled, 15 | .@{prefixCls}-link-disabled:hover { 16 | color: #00000040; 17 | cursor: not-allowed; 18 | } 19 | 20 | .@{prefixCls}-link-break { 21 | word-break: break-word; 22 | } 23 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/cell-components/pop-up-page/index.less: -------------------------------------------------------------------------------- 1 | @prefixCls: jfe-drip-table-cc-pop-up-page; 2 | 3 | .@{prefixCls}-modal-title { 4 | display: flex; 5 | flex-wrap: nowrap; 6 | color: #2e2e2e; 7 | font-size: 16px; 8 | 9 | .@{prefixCls}-auxiliary-desc { 10 | display: inline-block; 11 | margin-left: 8px; 12 | font-size: 14px; 13 | color: #bfbfbf; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/cell-components/status/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. 7 | */ 8 | @prefixCls: jfe-drip-table-cc-status; 9 | 10 | .@{prefixCls}-main { 11 | position: relative; 12 | outline: none; 13 | display: inline-flex; 14 | } 15 | 16 | .@{prefixCls}-dot { 17 | display: inline-flex; 18 | justify-content: center; 19 | align-items: center; 20 | margin-right: 5px; 21 | 22 | &-inner { 23 | border-radius: 50%; 24 | } 25 | } 26 | 27 | .@{prefixCls}-text { 28 | display: inline; 29 | flex: 1 1 auto; 30 | } 31 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import './index.less'; 10 | 11 | import classNames from 'classnames'; 12 | import RcCheckbox, { Props as RcCheckboxProps } from 'rc-checkbox'; 13 | import React from 'react'; 14 | 15 | export interface CheckboxProps extends RcCheckboxProps { 16 | label?: string; 17 | } 18 | 19 | const prefixCls = 'jfe-drip-table-rc-checkbox'; 20 | 21 | const Checkbox = React.memo(({ ...props }: CheckboxProps) => ( 22 | 29 | )); 30 | 31 | export default Checkbox; 32 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/col/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | @prefixCls: jfe-drip-table-rc-col; 10 | 11 | .@{prefixCls} { 12 | flex: 0 1 auto; 13 | } 14 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/col/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import './index.less'; 10 | 11 | import classNames from 'classnames'; 12 | import React from 'react'; 13 | 14 | export interface ColProps { 15 | className?: string; 16 | gutter?: [number, number]; 17 | style?: React.CSSProperties; 18 | span?: number; 19 | children?: React.ReactNode; 20 | } 21 | 22 | const prefixCls = 'jfe-drip-table-rc-col'; 23 | 24 | const Col = React.memo(({ ...props }: ColProps) => { 25 | const style = React.useMemo( 26 | () => { 27 | const st = Object.assign({}, props.style); 28 | if (props.gutter) { 29 | st.marginLeft = props.style?.marginLeft ?? `-${props.gutter[1]}px`; 30 | st.padding = `0 ${props.gutter[1]}px`; 31 | } 32 | if (props.span) { 33 | st.flexBasis = `${Math.floor((props.span / 24) * 100) / 100}%`; 34 | } 35 | return st; 36 | }, 37 | [props.style, props.span], 38 | ); 39 | return ( 40 |
41 | { props.children } 42 |
43 | ); 44 | }); 45 | 46 | export default Col; 47 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/error-boundary/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import React, { ErrorInfo } from 'react'; 10 | 11 | import Result from '@/components/react-components/result'; 12 | 13 | interface ErrorBoundaryProps {} 14 | interface ErrorBoundaryState { 15 | hasError: boolean; 16 | errorInfo: string; 17 | } 18 | 19 | class ErrorBoundary extends React.Component { 20 | public state = { hasError: false, errorInfo: '' }; 21 | 22 | public static getDerivedStateFromError(error: Error) { 23 | return { hasError: true, errorInfo: error.message }; 24 | } 25 | 26 | public componentDidCatch(error: unknown, errorInfo: ErrorInfo) { 27 | console.error(error, errorInfo); 28 | } 29 | 30 | public render() { 31 | if (this.state.hasError) { 32 | // You can render any custom fallback UI 33 | return ( 34 | 39 | ); 40 | } 41 | return this.props.children; 42 | } 43 | } 44 | 45 | export default ErrorBoundary; 46 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/menu/context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export interface MenuContextValue { 4 | prefixCls: string; 5 | } 6 | 7 | const MenuContext = createContext({ 8 | prefixCls: '', 9 | }); 10 | 11 | export default MenuContext; 12 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/menu/override.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import type { MenuProps } from './index'; 4 | 5 | /** 6 | * !!! IMPORTANT !!! 7 | * This context is ONLY used for Dropdown component. DO NOT use this in your production. 8 | */ 9 | 10 | // Used for Dropdown only 11 | export interface OverrideContextValue { 12 | prefixCls?: string; 13 | expandIcon?: React.ReactNode; 14 | mode?: MenuProps['mode']; 15 | selectable?: boolean; 16 | onClick?: () => void; 17 | } 18 | 19 | const OverrideContext = React.createContext(null); 20 | 21 | export function OverrideProvider( 22 | props: Parameters>[0], 23 | ) { 24 | const { children, ...restProps } = props; 25 | const override = React.useContext(OverrideContext); 26 | 27 | const context = React.useMemo( 28 | () => ({ ...override, ...restProps }), 29 | [ 30 | override, 31 | restProps.prefixCls, 32 | // restProps.expandIcon, Not mark as deps since this is a ReactNode 33 | restProps.mode, 34 | restProps.selectable, 35 | ], 36 | ); 37 | 38 | return { children }; 39 | } 40 | 41 | export default OverrideContext; 42 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/modal/index.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Estherjing(qichudegensui@163.com) 5 | * @modifier : Estherjing(qichudegensui@163.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import './index.less'; 10 | 11 | import Dialog from 'rc-dialog'; 12 | import { type IDialogPropTypes as RcDialogProps } from 'rc-dialog/lib/IDialogPropTypes'; 13 | import React from 'react'; 14 | 15 | export interface DialogProps extends RcDialogProps { 16 | closeIcon?: React.ReactNode; 17 | title?: React.ReactNode; 18 | } 19 | const prefixCls = 'jfe-drip-table-rc-modal'; 20 | 21 | const Modal = React.memo(({ ...props }: DialogProps) => { 22 | const closeIconToRender = ( 23 | 24 | { props.closeIcon 25 | || ( 26 | 27 | 28 | 29 | ) } 30 | 31 | ); 32 | return ( 33 | 40 | ); 41 | }); 42 | 43 | export default Modal; 44 | -------------------------------------------------------------------------------- /packages/drip-table/src/components/react-components/pagination/mini-select.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * This file is part of the drip-table project. 3 | * @link : https://drip-table.jd.com/ 4 | * @author : Emil Zhai (root@derzh.com) 5 | * @modifier : Emil Zhai (root@derzh.com) 6 | * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd. 7 | */ 8 | 9 | import React from 'react'; 10 | 11 | import Select from '../select'; 12 | 13 | const MiniSelect = Object.assign( 14 | {}, 15 | Select, 16 | React.memo((props: React.ComponentProps) => (