Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:29

    SevenOutman on DateRangePicker-fsm

    refactor(DateRangePicker): orga… (compare)

  • 06:20

    SevenOutman on main

    build(docs): bump rsuite 5.16.5 (compare)

  • 05:36
    codecov[bot] commented #2595
  • 05:36
    codecov[bot] commented #2595
  • 05:35
    vercel[bot] commented #2595
  • 05:35
    codecov[bot] commented #2595
  • 05:32
    vercel[bot] commented #2595
  • 05:32
    vercel[bot] commented #2655
  • 05:32
    vercel[bot] commented #2655
  • 05:31
    codesandbox-ci[bot] commented #2595
  • 05:30
    codesandbox-ci[bot] commented #2655
  • 05:30
    codecov[bot] commented #2595
  • 05:30
    vercel[bot] commented #2595
  • 05:30
    vercel[bot] commented #2595
  • 05:30
    simonguo synchronize #2595
  • 05:29

    simonguo on react-18

    docs(extensions): add @rsuite/f… build: bump 5.16.5 Merge branch 'main' into feat/r… (compare)

  • 05:29
    vercel[bot] commented #2655
  • 05:29
    vercel[bot] commented #2655
  • 05:28
    simonguo synchronize #2655
  • 05:28

    simonguo on virtualized

    test: update DropdownMenuSpec.js (compare)

tyddynonn
@tyddynonn_gitlab
Hi - I'm trying to use the pagination component for rsuite-table, as shown in the examples at https://rsuitejs.com/components/table. But the TablePagination component is not exported by rsuite-table. And I'm also confused by the example's import statement

The example shows import { Table } from 'rsuite';

const { Column, HeaderCell, Cell, Pagination } = Table;

whereas the rsuite-table examples show import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
Do I need to install the complete rsuite to get TablePagination, and is it TablePagination or Table.Pagination?
1 reply
tyddynonn
@tyddynonn_gitlab
So - It seems that indeed you DO need to use the entire rsuite to get the Pagination component, and then the form const { Column, HeaderCell, Cell, Pagination } = Table; appears to work.... but...
the code form <Column width={200} resizable sortable > <HeaderCell>Pilot</HeaderCell> <Cell dataKey='PilotName' /> </Column>
throws an error 'cannot read length of undefined' at line 841 of Table.js - line is if (columnChildren.length !== 2) {....
using the Table.Column etc form for the components doesn't help. This didn't happen when I was using rsuite-table. What gives?
tyddynonn
@tyddynonn_gitlab
Oops - my bad. I was embedding the Pagination element in the Table after the last Column rather than following it.
Eduardo Michel
@eduardoMichell
ji
hi*
Anish Sachdeva
@anishSachdeva
how to use the dateFns library, when i do const { dateFns } = DateRangePicker i am getting that dateFns is undefined. How do i fix this ?
2 replies
Sushanth-94
@Sushanth-94
Hi, i am trying to use rsuite-table with typescript. But i keep getting type errors, i do not see any @types npm package for rsuite-table.
How do i resolve this issue?
1 reply
Hugo Piat
@hupiat
Hi, I am using Table component from rsuite (not rsuite-table) and the virtualized prop is not present, is this a wanted thing ? (there is also other props which are different between the 2 packages)
Also i found a bug with onScroll : the scrollY value is always equals to 0 when using autoHeight={true}
1 reply
Hasanzoda Muhammadiqbol
@iqbol007
Hi, everyone how to switch between light mode and dark mode in my project?
1 reply
Hugo Piat
@hupiat
There is no onSortColumn in rsuite-table... minHeight and rowHeight are required (even with autoHeight and wordWrap) and not in rsuite package
pcatlin
@pcatlin
Hi, I'm trying to use the DateRangePicker, but the styling is changing other buttons on the page (to border-width 0 and hover underlines). Is there a nice easy way to prevent this that I'm missing?
Mikhil Mohan C
@MikhilMC
Hey, I was trying to install rsuite in my react project. But then installation failed. I have explained everything in this link.
https://stackoverflow.com/questions/66696011/react-suite-rsuite-package-installation-is-failing
1 reply
Please help me with this
Vitalii Lutai
@LVitalii_gitlab
Hi, I'm trying to use controlled Uploader, but files doesn't change their status to 'error' like on examples page, "Controlled" example. They hang on 'uploading' status, but onError function is called. Please, help me with this issue.
mshayan-ags
@mshayan-ags
Attempted import error: 'toaster' is not exported from 'rsuite'.
1 reply
Pravin Kumar
@vctpravin
Hi, I'm trying to use data for table component from redux state. The table component is adding _parent property for each nodes, which redux does not allow and causes crash
Please advise if there is a way to resolve this, thanks
Hakim Goldman
@Feiyim_twitter
anyone who has managed to setup rsuite to work with react@17.0.2?
Mirali
@mirik999

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

i have 17.0.1 and it works well. I have build project with CRA and followed install guide from off docs. Very simple.

Gathecha Wakanyi
@Gathexah_twitter
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
pointer-events: none;
}
.fade.in {
opacity: 1;
pointer-events: unset;
}

.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
pointer-events: none;
}
.fade.in {
opacity: 1;
pointer-events: unset;
}

Affects coreui react admin . Basically, the fade hides the content and opacity very harsh in blocking action @rsuite

Rosario Alessandro Cali
@RosarioAleCali
Hi, I am trying to configure rsuite in a Next.js project. Anyone can help me? I want to be able to use rsuite plus my custom CSS which is not working at the momen
2 replies
Ghost
@ghost~606c70ce6da037398479706e
Hey im new want to know or get example pls help :)

Need to make the notification widget and another window inward;

Requirements notification window:

· Filtering

· Ordering

· Grouping

· Pagination

· "Types" (success, danger, warning, information, muted)

· Expansion (additional information)

· Ability to add a link

· Mark as read (possibility to mark as read).

甘红旗
@honchy

maybe I found some bug with the component MultiCascader.

to reproduce, use the create-react-app demo project ,and replace your src/App.js like the code below:

import "./App.css";
import "rsuite/dist/styles/rsuite-default.css";
import { MultiCascader } from "rsuite";

function App() {
  const data = [
    {
      value: "1",
      label: "四川",
      children: [
        {
          label: "成都市",
          value: "1-1",
          children: [
            {
              value: "1-1-1",
              label: "锦江区",
            },
            {
              value: "1-1-2",
              label: "青羊区",
            },
          ],
        },
        {
          value: "1-2",
          label: "自贡市",
          children: [
            {
              value: "1-2-1",
              label: "自流井区",
            },
            {
              value: "1-2-2",
              label: "贡井区",
            },
          ],
        },
      ],
    },
    {
      label: "贵州",
      value: "2",
      children: [
        {
          value: "2-1",
          label: "贵阳市",
          children: [
            {
              value: "2-1-1",
              label: "南明区",
            },
            {
              value: "2-1-2",
              label: "云岩区",
            },
          ],
        },
        {
          value: "2-2",
          label: "六盘水市",
          children: [
            {
              value: "2-2-1",
              label: "钟山区",
            },
            {
              value: "2-2-2",
              label: "六枝特区",
            },
          ],
        },
      ],
    },
  ];
  const value = ["1-1-1", "1-1-2", "1-2-1", "1-2-2"];
  return (
    <div className="App">
      <MultiCascader data={data} value={value} />
    </div>
  );
}

export default App;

the problem is , with the default value ,the top level is shown as partial checked.
the expected is, shown as all checked.

Vikingslord
@Vikingslord
guys anyone having problems with npm installation?
Jaydev Dhinoja
@jaydevdhinoja

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
@jaydevdhinoja
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) => {
    setPage(1);
    setLimit(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) => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setSortColumn(sortColumn);
      setSortType(sortType);
    }, 500);
  };

  return (
    <div>
      <Table
        height={420}
        data={filterData}
        sortColumn={sortColumn}
        sortType={sortType}
        onSortColumn={handleSortColumn}
        loading={loading}
        onRowClick={(data) => {
          console.log(data);
        }}
      >
        <Column width={70} align="center" fixed>
          <HeaderCell>Id</HeaderCell>
          <Cell dataKey="id" />
        </Column>

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

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

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

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

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

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

          <Cell>
            {(rowData) => {
              function handleAction() {
                alert(`id:${rowData.id}`);
              }
              return (
                <span>
                  <a onClick={handleAction}> Edit </a> |{" "}
                  <a onClick={handleAction}> Remove </a>
                </span>
              );
            }}
          </Cell>
        </Column>
      </Table>
      <div style={{ padding: 20 }}>
        <Pagination
          prev
          next
          first
          last
          ellipsis
          boundaryLinks
          maxButtons={5}
          size="xs"
          layout={["total", "-", "limit", "|", "pager", "skip"]}
          total={tableData.length}
          limitOptions={[10, 20]}
          limit={limit}
          activePage={page}
          onChangePage={setPage}
          onChangeLimit={handleChangeLimit}
        />
      </div>
    </div>
  );
};
loganaaaflag
@loganaaaflag

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
@jaydevdhinoja
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?
vprahaladhan
@vprahaladhan
i tried sidenav component, but it displays horizontal menu instead of vertical, why?
table 的sort icon好像默认太小了
Mirali
@mirik999
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') {
    require('rsuite/dist/styles/rsuite-dark.min.css');
  } else {
    require('rsuite/dist/styles/rsuite-default.min.css');
  }
});
HamedEzati
@HamedEzati
hi
i want to use icon when my internet connection in disconnected. how can i do it?
TheColdPot
@TheColdPot
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*/})
TheColdPot
@TheColdPot

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) {
    super(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 />
  }
}
KaganHamzacebi
@KaganHamzacebi
hello, everyone. Is there a way to use rsuitejs with create-react-app?
Andrew Keturi
@adketuri