Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 16:08
    SevenOutman review_requested #2502
  • 15:47
    codecov[bot] commented #2500
  • 15:46
    vercel[bot] commented #2500
  • 15:44
    codesandbox[bot] commented #2500
  • 15:42
    vercel[bot] commented #2500
  • 15:42
    codecov[bot] commented #2500
  • 15:42
    vercel[bot] commented #2500
  • 15:42
    vercel[bot] commented #2500
  • 15:42
    superman66 synchronize #2500
  • 15:42

    superman66 on check-tree-picker

    test(CheckTreePicker): replace … (compare)

  • 10:55
    codecov[bot] commented #2502
  • 10:41
    codecov[bot] commented #2502
  • 10:40
    vercel[bot] commented #2502
  • 10:39
    codesandbox[bot] commented #2502
  • 10:37
    vercel[bot] commented #2502
  • 10:37
    vercel[bot] commented #2502
  • 10:37
    vercel[bot] commented #2502
  • 10:37
    SevenOutman synchronize #2502
  • 10:37

    SevenOutman on Whisper-ref-types

    fix(Whisper): correct type decl… docs(Whisper): add description … feat: export WhisperInstance (compare)

  • 10:13
    vercel[bot] commented #2502
guys anyone having problems with npm installation?
Jaydev Dhinoja

guys anyone having issues with Pagination? I am getting following warnings and the pagination isn't loading properly

"Unknown event handler property onChangePage. It will be ignored."
"Unknown event handler property onChangeLimit. It will be ignored."

Jaydev Dhinoja
here is the code snippet - any help would be highly appreciated!!
const RTable = ({ tableData }: RTableInterface) => {
  const { Column, HeaderCell } = Table;
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);

  //const [data, setData] = useState(filterData(tableData));
  const [sortColumn, setSortColumn] = useState("");
  const [sortType, setSortType] = useState<SortType | undefined>();
  const [loading, setLoading] = useState(false);

  const handleChangeLimit = (dataKey) => {

  const getData = () => {
    if (sortColumn && sortType) {
      return fakeData.sort((a, b) => {
        let x = a[sortColumn];
        let y = b[sortColumn];
        if (typeof x === "string") {
          x = x.charCodeAt(0);
        if (typeof y === "string") {
          y = y.charCodeAt(0);
        if (sortType === "asc") {
          return x - y;
        } else {
          return y - x;
    return tableData;

  const filterData = fakeData.filter((v, i) => {
    const start = limit * (page - 1);
    const end = start + limit;
    return i >= start && i < end;

  const handleSortColumn = (sortColumn, sortType) => {
    setTimeout(() => {
    }, 500);

  return (
        onRowClick={(data) => {
        <Column width={70} align="center" fixed>
          <Cell dataKey="id" />

        <Column width={200} fixed sortable>
          <HeaderCell>First Name</HeaderCell>
          <Cell dataKey="firstName" />

        <Column width={200} sortable>
          <HeaderCell>Last Name</HeaderCell>
          <Cell dataKey="lastName" />

        <Column width={200} sortable>
          <Cell dataKey="city" />

        <Column width={200} sortable>
          <Cell dataKey="street" />

        <Column width={300} sortable>
          <HeaderCell>Company Name</HeaderCell>
          <Cell dataKey="companyName" />

        <Column width={300} sortable>
          <Cell dataKey="email" />
        <Column width={120} fixed="right">

            {(rowData) => {
              function handleAction() {
              return (
                  <a onClick={handleAction}> Edit </a> |{" "}
                  <a onClick={handleAction}> Remove </a>
      <div style={{ padding: 20 }}>
          layout={["total", "-", "limit", "|", "pager", "skip"]}
          limitOptions={[10, 20]}

anyone who has managed to setup rsuite to work with react@17.0.2?

Using npm, adding the --legacy-peer-deps to my npm install command resovled the peer dependency issues I was having.

npm i --save --legacy-peer-deps rsuite

Jaydev Dhinoja
UPDATE on my previous post: the latest pagination component doesn't expose onChangePage and onChangeLimit props it seems and also doesn't take the layout props also - any has faced similar issue?
i tried sidenav component, but it displays horizontal menu instead of vertical, why?
table 的sort icon好像默认太小了
Hi, i want to make theme switching in react (17^) , can someone did before ?
i'm trying to require css files conditionally but in my case it works just once ( doesn't matter to light or dark )
Here is my code from index.js
store.subscribe(() => {
  const theme = store.getState().theme;
  if (theme.name === 'dark') {
  } else {
i want to use icon when my internet connection in disconnected. how can i do it?
you can do it
use navigator.onLine to get a boolean when the page was just rendered
and also, DOM has a event offline
it like document.addEventListener('offline', () => {/*your code*/})

you can use it with React state, like this (pseudo code)

function App() {
  const [online, setOnline] = useState(navigator.onLine);
  useEffect(() => {
    document.addEventListener('offline', () => setOnline(false));
    /* Or Jquery 
     * $(document).on('offline', () => setOnline(false);
  }, []);
  return online ? <MyWebApp /> : <MyWebAppPlaceHolderWhenOffline />

or class

class App extends React.Component {
  constructor(props) {
    this.state = { online: navigator.onLine }
    document.addEventListener('offline', () => this.setState({online: false}));
    /* Or Jquery 
     * $(document).on('offline', () => this.setState({online: false}));
  render() {
    return this.state.online ? <MyWebApp /> : <MyWebAppPlaceHolderWhenOffline />
hello, everyone. Is there a way to use rsuitejs with create-react-app?
Andrew Keturi
Pablo Sepulveda V
hello, my problem Cannot read property 'Body' of undefined on <Sidenav.Body
Hi everyone, has anyone been able to execute the Webpack compiles multiple themes instruction? It is already difficult to calculate how much time I spend, but I did not manage to do it. maybe there is a working instruction?
1 reply
it's really problem for me, but i don't want to leave this issue unresolved
Duong Nguyen
Hi all, For the table, we have an issue with editable cell.
When we click to edit the cell the scrollbar of table content will be scroll to top.
Do you guys have any idea to fix it?
1 reply
hey has anyone created Rsuite admin dashboards or free or paid themes?
The style here is a bit basic and looking for a designer or theme that can beautify it
Pravin Kumar
Hi guys, is it possible to create a scrollbar for only a particular column in tree-table. For example, I am having tree in one column and actions in another column which is transparent. When i scroll the table horizontally the action icons come on top of the column(tree). I want to restrict scrolling to tree column only. Thanks
@nhduong29 you may be editing the table data directly, try to put it in useState. I had that issue earlier, when i moved my data to redux, the issue was solved
Tiago Perdigão
Hi everyone. Is there a hooks version of the Open/Close menu of the Sidenav?
M Khabibur
Hello, is there a way to get align middle working ?
I followed example, but it isn't work like that
Deco Moraes
Hey guys, I would like to translate the "page" word in the display length selector, e. g. "20 / page" to "20 / página"
hello, do you know how I can search for a parent folder in the search bar of the Cascader component ?
Tiago Perdigão
hello. Is there a way to remove with css the onclick ripple effects?
2 replies
Hey guys
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in FormControl (created by Context.Consumer)
in FormControlWrapper (created by defaultProps(FormControlWrapper))
in defaultProps(FormControlWrapper) (at ProfilePage.js:130)
in div (created by FormGroup)
in FormGroup (created by defaultProps(FormGroup))
in defaultProps(FormGroup) (created by withStyleProps(defaultProps(FormGroup)))
in withStyleProps(defaultProps(FormGroup)) (at ProfilePage.js:128)
in BoolField (at ProfilePage.js:156)
i need help
here is code
not works changing value and this error and console
I wondered if your Table component supported adding a filter control in the column header? Or allowed the dev to inject a component into a column header? Couldn't see this in the examples
Shweta Kale
How to off the tooltip in SideNav?
1 reply
Simon Guo
Iosvany Alvarez
Hello, I am new to this framework and it is very good. By the way, I would like to know how you can submit a form and collect the data in a useState? Thank you.
Hello. How to use rsuite into metronic template using node-sass? help me
Panuganti Jagadeesh
Hi, I raised an issue, #1685 could you please go through it once?
Every body say oh ye
How can I use Tag Drawer.Action in .tsx
hello,everyone.How can I make the MultiCascader support mouse hover and expand?
Hector Huaranga
Hola, alguien es español?