Git Product home page Git Product logo

rsuite-table's Introduction

React Suite logo

English | 中文版

npm GitHub Actions npm bundle size codecov Discord Gitter Gitter Gitpod ready-to-code

React Suite is a set of React components. It is committed to providing high-quality and comprehensive React components to help developers quickly build web applications.

Supported Platforms

Browser

React Suite supports the latest, stable releases of all major browsers and platforms. IE<=10 is no longer supported since React Suite 5.0. React Suite is designed and implemented for use on modern desktop browsers rather than mobile browsers.

IE Edge Firefox Chrome Safari
>=11 >=14 >= 45 >= 49 >= 10

Server

React Suite supports server side rendering. Support Next.js to build applications.

Installation

React Suite is available as an npm package.

# with npm
npm install rsuite

# with Yarn
yarn add rsuite

# with pnpm
pnpm add rsuite

# with Bun
bun add rsuite

Usage

import { Button } from 'rsuite';
import 'rsuite/styles/index.less'; // or 'rsuite/dist/rsuite.min.css'

function App() {
  return <Button appearance="primary">Hello World</Button>;
}

More guides on how to get started are available here.

Documentation

It's the https://rsuitejs.com website for the latest version of React Suite. For older versions head over here

The previous major version 4.x will no longer receive new features, and it is recommended to upgrade to the latest 5.x releases. Bug fixes for 4.x are still being supported for a period of time, and security fixes are supported until 6.x is in progress.

Framework Guides

React Suite can be used in your favorite framework. We have prepared step-by-step guides for these frameworks:

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Make sure you've read the guidelines before you start contributing.

Sponsoring services

These great services help us to build and maintain the project.

Service Description
GitHub Github lets us host the Git repository and coordinate contributions.
Vercel Vercel provides the hosting for the documentation site.
CodeCov CodeCov lets us monitor test coverage.
Gitee Gitee grants us GVP - Gitee Most Valuable Open Source Project.
CodeSandbox CodeSandbox lets us provide live previews of the components.
Stackblitz Stackblitz lets us provide live previews of the components.

Supporting React Suite

If you like React Suite, you can show your support by either

This project exists thanks to all the people who contribute.

opencollective-now

License

React Suite is MIT licensed.

rsuite-table's People

Contributors

b1rdex avatar dependabot[bot] avatar edymov avatar eiji03aero avatar fallenleavesguy avatar gami-404 avatar gomez avatar hiyangguo avatar jdeniau avatar justasdev avatar kirat-singh avatar lgtm-com[bot] avatar lorefnon avatar marvelsq avatar mynameisdu avatar neomusic avatar opinius avatar psebestyen avatar pyroboomka avatar sevenoutman avatar simonguo avatar superman66 avatar trondpet avatar vingeraycn avatar yanshibainu avatar yourvishal007 avatar z2015 avatar zhangguimei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rsuite-table's Issues

分页组件样式引用的BUG

引用了index.less之后,分页组件并没有CSS被应用到,通过查看官网上的css发现,而是采用了类似bootstrap之类的分页组件样式,我引入一个bootstrap的外链,显示就正常了,虽然和表格主题并不搭配。

字体显示模糊问题

列表里面的字体,都是同样的字体和样式,但是一行模糊一行正常,这是什么问题?
image

[violation] requestAnimationFrame

Hi, I'm using rsuite-table with my React application. I'm using the virtualized flag to display 10 to 60,000 rows of data. Here's the issue I'm facing, every time I scroll through the list of data on the table, it seems to be causing a requestAnimationFrame violation. Also, this might be what's causing my app's fps to hover only around 13 - 16fps on table scroll.

Screen Shot 2019-08-12 at 4 25 30 PM

Is there a solution on this? Am I missing something critical on how it should be used?

More info on my data table:

  • 11 Columns
  • 10 - 60,000 Rows
  • virtualized={true}
  • height={500}
  • 150width on all columns
  • bordered
  • cellBordered
  • headerHeight={80}

On:

  • Chrome Version 75.0.3770.142 (Official Build) (64-bit)
  • Mac

Table scroll bar problem

Can provide native scroll bar?
I want to do unlimited scrolling loading.There are some problems.When I scroll down and start loading the data.The data is loaded.But the scroll bar is still at the bottom

How can I get the scrollbar to return itself to the correct position, such as in the middle?

滚动条拖动事件BUG

Table组件自己实现了一个滚动条样式,但是事件监听不正确,应该使用document.addEventListener来监听,这样即使鼠标移到了浏览器窗体外,仍然能继续响应事件,现在是我拖动“滚动条”的时候,鼠标到浏览器之外松开鼠标再回到页面上,滚动条仍属于拖动状态,会随鼠标滚动。另外默认滚动条样式非常丑,webkit内核可以通过CSS修改滚动条样式,有时候喜欢自己去改,希望能有个配置启用或禁用组件实现的滚动条样式。
重现页面:https://rsuitejs.com/rsuite-table/#%E5%88%86%E9%A1%B5

可以考虑完善一下排序功能

目前的排序的sortColumn只支持一个,可以考虑支持多个,举例一个场景就是:先按照出生日期排好序,然后按照英文名字典序在原来的基础上继续排序。

Module not found: Error: Can't resolve '~rsuite-table/lib/less/index.less' in

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve '~rsuite-table/lib/less/index.less' in '/Users/ccguo/Documents/ETH/Demo/src'
@ ./src/index.jsx 23:0-44
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 861 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
ℹ 「wdm」: Failed to compile.

运行demo报错

这个文件当中依赖了rsuite,但貌似npm install安装的时候并没有安装rsuite
版本2.0.0

./node_modules/rsuite-table/lib/TablePagination.js
Module not found: Can't resolve 'rsuite' in '/Users/tangduck/projects/rui/my-app4/node_modules/rsuite-table/lib'

ios9.3及以下版本系统有bug

ios9.3及以下版本系统里面,toggleClass.js文件line22,当node为空数组的时候没有length属性,会直接调用line28的toggleClass方法,会导致dom-lib/lib/classNames/removeClass.js中13行的target.className报undefined

image

image

功能请求:横向滚动加入虚拟渲染

请问有没有后续增加table横向滚动增加虚拟渲染的计划,在使用中有列特别多的情况,目前table只做了竖向的虚拟渲染,这种情况下,渲染的dom量依然很大,上下滑动中有一些卡顿现象。不知道后续有没有这方面的计划。

Variable @H500 is undefined

请问这是什么原因呀
./node_modules/rsuite-table/lib/less/index.less
Module build failed:

@pagination-background: #f5f5f5;
@resize-mouse-color: @H500;
^
Variable @H500 is undefined
in ***(项目路径名)/node_modules/rsuite-table/lib/less/variables.less (line 6, column 21)

Cell 中内容过长时被截断的问题有解么?

Cell 中内容过长时因为用了text-overflow: ellipsis;导致内容被截断,请问有没有考虑过用换行的形式来展示么?换行的话会导致表格内容高度计算出错么?这个问题在无限滚动这种情况下是不是无解呢?

TypeError: Cannot read property 'prefix' of null

我在服务端引用
import {Table, Column, Cell} from 'rsuite-table';
webpack 打包编译 报 ‘Variable @H500 is undefined’ 这个错误。我在index.less 声明了 这个变量 @H500: blue 后 再打包编译 TypeError: Cannot read property 'prefix' of null。
详细错误如下:
D:\React 渲染\MyReact-table\node_modules\dom-lib\lib\transition\index.js:59
prefix = _getTransitionPropert.prefix,
^
TypeError: Cannot read property 'prefix' of null
at Object. (D:\React 渲染\MyReact-table\node_modules\dom-lib\lib\transition\index.js:59:36)
at Module._compile (module.js:641:30)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object. (D:\React 渲染\MyReact-table\node_modules\dom-lib\lib\index.js:60:20)
at Module._compile (module.js:641:30)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.