현재 MUI 상태를 사용하여 열을 합산하고 표시하려면 어떻게 해야 합니까?

Question

일부 개인 데이터를 추적하기 위해 MUI 웹 애플리케이션을 만들고 있습니다.

저는 데이터를 표시하기 위해 MUI DataGrid Pro를 사용하고 있으며, 우리가 알고 있듯이 DataGrid 구성 요소 내부에는 꽤 광범위한 필터가 있습니다.

특정 값을 얻기 위해 데이터베이스를 다시 쿼리할 필요 없이 현재 표시된 필터링된 열의 합계를 표시하고 싶습니다. 상당히 간단해야 할 것 같지만 액세스하는 방법을 모르겠습니다.

datagridpro API는 https://mui.com/x/api/data-grid/data-grid-pro/

에 있습니다.

내 데이터 그리드 구성요소는 다음과 같이 구성됩니다.

으아아아

이는 데이터로 상태를 설정하기 위해 표준 useEffect를 통해 제공됩니다.

transformedData 메서드는 다음과 유사합니다.

으아아아

다음은 DataGridPro 구성 요소를 보여주는 현재 코드입니다.

으아아아

다시 말하지만, 기본적으로 페이지 상단에 있는 별도의 div에 지정된 열의 합계를 다음과 같은 형식으로 표시하고 싶습니다.

총액 1: 합계(value_1) |총액 2: 합계(value_2) |총액: 합계(index)

---

[여기에 테이블 데이터 삽입]

마찬가지로 MUI 데이터 그리드를 기준으로 필터링할 때 이러한 표시 열의 합계를 표시하고 싶습니다.

value_1에 총 4개의 행이 있고 값이 아래에 표시되어 있다고 가정합니다

으아아아

값으로 필터링하고 싶다고 가정해 보세요 >2.

DataGridpro 구성 요소에서는 다음과 같이 필터링되어 표시됩니다.

으아아아

표시된 열의 计数，即2，行的总和将为7을 표시하고 싶습니다. < /p>

액세스하려면 어떤 API 속성을 사용해야 합니까?

감사합니다

Answer 1

MUI DataGridPro API 中的 gridFilteredSortedRowIdsSelector를 사용하여 열의 합계를 구할 수 있습니다. 이 선택기는 현재 그리드에서 필터링 및 정렬된 행 ID의 배열을 반환합니다. 이 배열을 사용하여 행 데이터에 액세스하고 필요한 열의 합계를 계산할 수 있습니다. 예를 들어 다음을 수행할 수 있습니다.

으아악

그럼

으아악

여기에서 전체 예제를 볼 수 있습니다: codesandbox.io

자세한 내용은 필터 선택기, API 개체 및 액세스 상태를 참조하세요.