sematable:ReactJS Redux数据表

  • z4_612177
    了解作者
  • 597.7KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 00:53
    上传日期
可分割的 Sematable包装一个表组件,并提供: 按列值过滤 用文字搜索 分类 行选择 分页 ...具有通过Redux将表状态保持在应用程序状态的能力,因此过滤器,排序信息,选定的行和分页信息在路由导航中仍然有效。 入门 如果您只想在浏览器中单独测试该表,则可以使用React Storybook。 npm install npm run storybook 然后打开浏览器到 。 尝试删除搜索过滤器,并观察表的响应。 有一些故事讲述了过滤器,引导程序和可编辑单元。 :warning: CSS依赖 Sematable假定已经加载了Bootstrap CSS,Font Awesome CSS和react
sematable-master.zip
内容介绍
# Sematable Sematable wraps a table component, and provides: - filtering by column value - search with text - sorting - row selection - pagination ... with the ability to persist the table state in application state with Redux, so filters, sort info, selected rows, and pagination info survives route navigations. ![image](https://cloud.githubusercontent.com/assets/497926/24330201/a156edec-1219-11e7-877b-e0c4c49fd947.png) - [More About Sematable](https://sematext.com/blog/2016/12/07/reactjs-redux-table-sematable/) - [Live Sematable examples](https://apps.sematext.com/demo) ![](https://nodei.co/npm/sematable.png?downloads=true&downloadRank=true&stars=true) ## Getting Started If you would like to simply test the table alone in your browser, we have included React Storybook. ``` npm install npm run storybook ``` Then open your browser to http://localhost:6006/. Try to delete the search filters and watch how the table responds. There are several stories featuring Filters, Bootstrap, and Editable cells. ### :warning: CSS Dependencies Sematable assumes that Bootstrap CSS, Font Awesome CSS, and react-select CSS are already loaded, so please make sure that's the case. Sematable should work with either Bootstrap 3 or Bootstrap 4. You can find the css for react-select in `node_modules/react-select/dist/react-select.css`. ## Reducer Before using the sematable wrapper, you need to setup the reducer. You should combine the provided reducer in your root reducer like this: ```javascript import { reducer as sematable } from 'sematable'; const reducer = combineReducers({ sematable, ... }); ``` ## Usage The most frequent use case for sematable is to show tabular data with some actions (edit, delete, etc.). See the below example for that. For information on how to get selected rows and other table state, check out the [section about selectors](#selectors). AppsTable.js: ```javascript import React, { Component, PropTypes } from 'react'; import sematable, { Table } from 'sematable'; import AppsTableActions from './AppsTableActions'; const columns = [ { key: 'id', header: 'ID', sortable: true, searchable: true, primaryKey: true }, { key: 'name', header: 'Application', sortable: true, searchable: true }, { key: 'token', header: 'Token' }, { key: 'plan', header: 'Plan', sortable: true }, { key: 'role', header: 'Role', sortable: true }, { key: 'actions', header: 'Actions', Component: AppsTableActions }, ]; const propTypes = { headers: PropTypes.object.isRequired, data: PropTypes.array.isRequired, primaryKey: PropTypes.string.isRequired, }; class AppsTable extends Component { render() { return ( <Table {...this.props} selectable columns={columns} /> ); } } AppsTable.propTypes = propTypes; export default sematable('allApps', AppsTable, columns); ``` AppsTableActions.js: ```javascript import React, { Component, PropTypes } from 'react'; import { Link } from 'react-router'; const propTypes = { row: PropTypes.object.isRequired, }; class AppsTableActions extends Component { render() { const row = this.props.row; return ( <Link to={`/settings/${row.id}`}> Settings </Link> ); } } AppsTableActions.propTypes = propTypes; export default AppsTableActions; ``` The `sematable` function will wrap your component and add filter, pagination, and other sematable functionality. The first argument is name of this table. It should be unique across your app. The second argument is your component, and the third are the column definitions. - You can omit the `selectable` property to hide the row selection controls. - You can use the `className` property to set the table class (`table-sm table-striped table-hover` is the default). Columns definitions have the following properties: - _key_ is the name of the property used in row objects - _header_ is the header label that will be used for this column - _title_ is the title that will be used when column header is hovered - _className_ is the css class to use for the column `<td>` element - _sortable_ defines if user should be able to sort by this column - _searchable_ defines if user should be able to text-search by this column (simple case-insensitive substring search) - _primaryKey_ defines if this column is the primary key - _hidden_ defines if we should hide this column (useful if you don't want to show primary key column) - _Component_ defines which component should be used to render cell contents - _filterable_ defines if user should be able to filter rows by distinct values of this column - _filterValues_ can be provided to define distinct filter values for this column. If not provided, unique values will be extracted from provided data. - _getFilterTitle_ is a function with `(value)` signature that can be provided to customize the filter title - _getFilterLabel_ is a function with `(value)` signature that can be provided to customize the filter label - _getFilterClassName_ is a function with `(value)` signature that can be provided to customize the filter css class At least one column definition should have `primaryKey: true`. Check out `stories/UsersTable.js` to see how these properties can be used. ## Advanced Usage If you just need to show tabular data, with some actions for each row, you can use the provided `Table` component in combination with the `sematable` wrapper as shown above. Otherwise, you can write the table structure yourself. The `sematable(tableName, component, columns, configs)` wrapper accepts four parameters: - _tableName_ is a unique name for this table (used to store state) - _component_ is the table component you want to wrap - _columns_ is an array of column definitions - _configs_ is an optional object where you can specify configuration properties ### Showing page size and filter somewhere else If you want to show the page size and filter somewhere else in your application, you can use the provided PageSizeContainer, and FilterContainer component. Like this: ```javascript import { PageSizeContainer, FilterContainer } from 'sematable'; export default props => ( <div> <FilterContainer tableName="myTable" /> <PageSizeContainer tableName="myTable" /> </div> ); ``` You can style these components with `style` or `className`. ### Configuration properties: - _plain_ if you want only the table component to be returned without page size, pagination, or filter (will not use bootstrap grid) - _showPageSize_ if page size select should be shown - _showFilter_ if text filter field should be shown - _defaultPageSize_ overrides the default page size (if not specified 5 will be used) - _autoHidePagination_ if pagination should be hidden if the number of pages is 1 (default is true, which means pagination is hidden if the number of pages is equal to 1) - _filterClassName_ css class for the filter component - _filterClassNamePrefix_ css class prefix forwarded to [react-select](https://react-select.com/styles#using-classnames) ('Select' by default) - _filterContainerClassName_ css class for the filter component container element ('col-md-6' by default) - _filterPlaceholder_ filter placeholder text - _pageSizeClassName_ css class for the page size component ('col-md-6' by default) - _pageSizeContainerClassName_ css class for the page size component container element ('col-md-6' by default) - _sortKey_ default column to sort by (not sorted by default) - _sortDirection_ default sort direction, `asc` or `desc` (`asc` by default) There's no requirement that the wrapped component needs to be a table, it could be a list, a div, an image gallery, or anything else. We will pass the following props to the wrapped `component`: - _data_ is the filtered, sorted, and paginated data (the current view) - _headers_ contains callbacks for sorting and selection - _primaryKey_ is the name of the primary key field Here's how you would implement
评论
    相关推荐
    • bootstrap-npm-starter:用于新的由Bootstrap驱动的npm项目的入门模板
      Bootstrap NPM入门模板 立即创建由Bootstrap支持的npm项目。 关于 bootstrap-npm-starter是一个GitHub模板存储库,用于创建由Bootstrap支持的新的npm项目,由Bootstrap共同作者@mdo维护。 您也可以将其用作自己的...
    • bootstrap
      Bootstrap NPM入门模板 立即创建新的由Bootstrap驱动的npm项目。 关于 bootstrap-npm-starter是一个GitHub模板存储库,用于创建由Bootstrap支持的新的npm项目,由Bootstrap共同作者@mdo维护。 您也可以将其用作自己...
    • react-bootstrap-npm-kit:React+Bootstrap+NPM+Browserify 的入门套件
      react-bootstrap-npm-kit React+Bootstrap+NPM+Browserify 的入门套件 快速开始 运行make来构建。 为方便起见,请使用文件观察器,例如 。 有用的开发工具 - 无需完全刷新即可更新浏览器内的 CSS。 - 使用 JSX ...
    • bootstrap-for-vue
      引导程序 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
    • backbone_bootstrap_base
      bone_bootstrap_base 设置 npm install bower安装
    • bootstrap-vue
      vue-bootstrap 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • bootstrap-themes
      引导主题 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • react-bootstrap-utils:React Bootstrap
      react-bootstrap-utils Boostrap v4组件的React实现。 文档和演示: : 路线图 []精明 []表格范围 []基于配置选项的表单生成 []输入帮助 []根据其他字段进行输入重置 []输入遮罩 []个输入组 []隐藏/显示表单输入 ...
    • ReactApp2:用于NpmBootstrap
      npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见...
    • ember-cli-bootstrap-components
      npm install ember-cli-bootstrap-components 用法 bs-输入 为普通引导表单包装标签和文本输入。 可以接受以下值的绑定: 为了 标签文本 类型 ID 占位符 价值 错误 假定错误遵循 DS.Errors 的约定,并且是具有消息...