nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.39k stars 385 forks source link

[React]When use "setPerpage", Not Reload Pagination number #2029

Closed namtaesik closed 3 months ago

namtaesik commented 3 months ago
import Grid from "@toast-ui/react-grid";
import "css/style-custom.css";
import "css/custom-tui-grid.css";
import '/node_modules/tui-pagination/dist/tui-pagination.css';
const PaginationCountList = [
  { value: 0, label: "전체 보기" },
  { value: 10, label: "10개씩 보기" },
  { value: 20, label: "20개씩 보기" },
  { value: 30, label: "30개씩 보기" },
  { value: 40, label: "40개씩 보기" },
  { value: 50, label: "50개씩 보기" },
  { value: 100, label: "100개씩 보기" },
]
export default function DataTableArea({...props들}){
  const [paginationCount, setPaginationCount] = useState(10);  
 useEffect(()=>{
    // 페이지당 보여질 데이터 수 변경 시 setPerPage
    refGrid?.current?.getInstance()?.setPerPage(paginationCount,data);
  },[paginationCount])
return(
<Grid
            ref={refGrid}
            data={data}
            columns={columns}
            rowHeight={25}
            width={props.width ?? "auto"}
             onGridUpdated={onGridUpdated ?? ((instance)=>{})}
            afterChange={(a,b,c)=>{console.log(a,b,c);}}
            bodyHeight={bodyHeight}
            pageOptions={
              {
                  useClient: true,
                  perPage: paginationCount === 0? data.length : paginationCount,
                  }
            }
            treeColumnOptions={treeColumnOptions ?? {}}
            // virtualScrolling={true}
            //heightResizable={true}
            rowHeaders={hasRowHeader ?? false ? ["rowNum"] : []}
            //onDblclick={UserEditEdialogOpen}
            selectionUnit="row"
            onDblclick={handleOnDbClickGrid}
            onClick={handleOnClickGrid}
            scrollX={true}
            scrollY={true}
          />
);
}

useEffect(()=>{ // GridReload when the number of data to be shown per page changes refGrid?.current?.getInstance()?.setPerPage(paginationCount,data); },[paginationCount]) If you run this part, the data shown on the page will change, but the number of paging in the paging will not change. For example, if you want to see 10 pieces of 100 pieces of data each If you change to 20 views There are 10 pages, but the number of data that appear on each page is 20 Pages 6 to 10 show an empty grid.

namtaesik commented 3 months ago

디버거로 확인해본 결과 "Grid.prototype.setPerPage = function (perPage, data)" 위 함수에 "perPage" 파라미터가 문자열로 넘어가는 것을 확인하였습니다. 로컬 소스코드에서 "Number(paginationCount)" 로 명시적으로 숫자값으로 변경하여 "setPerPage()"를 수행하니 정상적으로 페이지가 변경 표시 되었습니다.

[Translate] I checked it with a debugger "Grid.prototype.setPerPage = function (perPage, data)" We have confirmed that the "perPage" parameter is transferred to a string in the function above. The page changed normally when I performed "setPerPage()" by explicitly changing it from the local source code to a numeric value of "Number(pagmentationCount).