react-perfect-scrollbar-z

LIVE EXAMPLE

---

---

Description (big change)

• It is wrap the perfect-scrollbar for the element.

• Auto update scrollbar (resize, change data), you don't have to do anything.

• Support for scroll-y for only the body of the table. (Keep header)

---

Usage

npm install react-perfect-scrollbar-z

Import the module in the place you want to use:

import 'react-perfect-scrollbar-z/build/styles.css';

import { Scrollbar, ScrollbarTBody, ScrollbarDataList } from 'react-perfect-scrollbar-z' // wrap default

Snippet

simple

    // div
    // something1 (..any, showHide, data2, data3)
    <Scrollbar height="100px" effectData={something1...}>
        { something1...  }
    </Scrollbar>

data-list (ul/ol/dl)

    <ScrollbarDataList
        effectData={listTodo}
        refScroll={ref}
        {/* tagName?: 'ul' | 'dl' | 'ol'; */}
        maxHeight="200px"
        always
    >
        {listTodo.map((item, index) => {
            return (
                <li
                key={index}
                style={{
                    background: 'rgb(243 244 246)',
                }}
                >
                <b>
                    {index + 1} - {item.title}
                </b>
                &nbsp;&nbsp;
                <button onClick={() => delItem(item)}>Delete</button>
                </li>
            );
        })}
    </ScrollbarDataList>

tbody

    const [listTodo, setListTodo] = useState<any[]>([]);

    <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Action</th>
          </tr>
        </thead>
        <ScrollbarTBody
          effectData={listTodo}
          // effectData = { [listTodo, showHide, ....more] }
          maxHeight="130px"
          always
        >
          {listTodo.map((item, index) => {
            return (
              <tr key={index} style={{ borderBottom: '1px solid' }}>
                <td style={{ background: 'red', color: '#fff' }}>
                  {index + 1} - {item.title}
                </td>
                <td style={{ background: 'green', textAlign: 'center' }}>
                  <button onClick={() => delItem(item)}>Delete</button>
                </td>
              </tr>
            );
          })}
        </ScrollbarTBody>
    </table>

forTableChildren

    <div style={{ boxShadow: '0px 0px 8px rgb(0 0 0 / 60%)' }}>
        <Scrollbar
          effectData={listTodo}
          refScroll={ref}
          maxHeight="200px"
          forTableChildren 
          {/* => find first table append perfect-scrollbar */}
          always
        >
          {listTodo.map((item, index) => {
            return (
              <div
                key={index}
                style={{
                  background: 'rgb(243 244 246)',
                }}
              >
                <b>
                  {index + 1} - {item.title}
                </b>
                &nbsp;&nbsp;
                <button onClick={() => delItem(item)}>Delete</button>
              </div>
            );
          })}

          <div>
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {listTodo.map((item, index) => {
                  return (
                    <tr key={index} style={{ borderBottom: '1px solid' }}>
                      <td style={{ background: 'red', color: '#fff' }}>
                        {index + 1} - {item.title}
                      </td>
                      <td style={{ background: 'green', textAlign: 'center' }}>
                        <button onClick={() => delItem(item)}>Delete</button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Scrollbar>
    </div>

// access scrollbar (your handler)
refScroll.current.element.scrollTop = 0  || refScroll.current.update()

---

Props

props	type	description
options	Object	perfect-scrollbar/options
tagName	String	Container scrollbar. Default ul for data-list
effectData	String, Array, Object,.....	Automatically update the scrollbar if the effectData has changed.
always	boolean	Always show scrollbar if data is overflow true. Default false
maxHeight	px, %, vh	max-height of scrollbar
height	px, %, vh	height of scrollbar
maxWidth	px, %, vh	max-width of scrollbar
width	px, %, vw	width of scrollbar
className	String	Your css-class
style	Object	Your css-style
wheelStop	Boolean	wheelPropagation (quick in options). Default: true
refScroll	useRef	If you want to use scrollbar (ps scrollbar)
---	---	---
onScrollY	Function	y-axis is scrolled in either direction.
onScrollX	Function	x-axis is scrolled in either direction.
onScrollUp	Function	scrolling upwards.
onScrollDown	Function	scrolling downwards.
onScrollLeft	Function	scrolling to the left.
onScrollRight	Function	scrolling to the right.
onYReachStart	Function	scrolling reaches the start of the y-axis.
onYReachEnd	Function	scrolling reaches the end of the y-axis (useful for infinite scroll).
onXReachStart	Function	scrolling reaches the start of the x-axis.
onXReachEnd	Function	scrolling reaches the end of the x-axis (useful for infinite scroll).

Note

• tbody only scroll-y (no x). You should not use maxWidth, width (default by table).

• Update scrollTop, scrollLeft: using refScroll.

• ul/ol/dl/tbody. This is a special. (multi child), so you shouldn't update the border for tagName.

Run

LIVE EXAMPLE

npm install

npm run dev
npm run start

License

MIT