React Context를 사용하는 RDT 모바일 래퍼

22877 단어 uxjavascriptreactdesign
웹 개발자가 해야 하는 복잡한 작업 중 하나는 테이블을 표시하는 것입니다. 기본적으로 테이블은 사용하기 쉬워야 하기 때문에 페이지 매김, 필터링, 정렬 및 데이터를 처리하기 위한 모든 것을 제공해야 합니다. 때로는 데스크탑에서 이를 달성하는 것이 복잡하지만 실행 가능하지만 모바일 측면에서는 훨씬 더 복잡할 수 있으므로 이제 이 작업을 쉽게 하기 위해 테이블 ​​래퍼를 공유할 것입니다.

제목에서 읽을 수 있듯이 테이블 작성을 시작하는 데 필요한 한 가지는 React Data Table Component (RDT) 입니다. 이 패키지는 정렬, 페이징, 필터링, 스타일 지정 등을 위한 멋진 API를 제공하는 강력한 패키지입니다.

이제 RDT 문서를 살펴보면 테이블을 모바일 반응형으로 만드는 설정이 즉시 사용 가능하다는 것을 알았을 것입니다. 그렇다면 이 게시물의 요점은 무엇입니까?

음, 옵션이 있지만 모달 창을 열거나 파일을 다운로드하거나 수행해야 하는 작업 버튼을 추가해야 하는 경우 방법에 따라 코드를 여러 번 반복해야 할 가능성이 높습니다. 애플리케이션에 필요한 많은 테이블.

이 래퍼가 무엇을 해결하는지 설명하기 위해 사용된 모든 코드와 함께 repository 및 codesandbox을 제공할 것입니다.

RDT 설치


  • 다음 명령 중 하나를 사용하여 RDT를 설치합니다.
  • npm i react-data-table-component styled-components
  • yarn react-data-table-component styled-components

  • data 소품: 모든 테이블 정보가 포함된 객체 배열입니다.
  • columns 소품: 모든columns 소품이 정의되는 메모화된 객체입니다. 예:

    • const columns = useMemo(() => [
  {
    name: 'Column name 1',
    id: 'columnId1',
    selector: ({ attribute1 }) => attribute1
  },
  {
    name: 'Column name 2',
    id: 'columnId2',
    selector: ({ attribute2 }) => attribute2
  },
  {
    name: 'actions',
    id: 'actions',
    cell: ({ attribute3 }) => (
      <div>
        <span onClick={(attribute3) => {}}Action 1</span>
      </div>
    ),
    hide: 'md'
  }
  // more columns...
], [])


    창 해상도가 데스크톱 해상도보다 낮은 경우 속성hide: 'md'을 추가하면 열이 자동으로 숨겨집니다. 이는 쉽지만 이제 모바일에 표시할 방법이 필요하고 이제 ExpandedComponent가 유용할 것입니다.

    래퍼 만들기


  • Table 구성 요소는 기본적으로 앱이 여러 테이블을 사용해야 하는 경우 스타일을 공유하기 위해 생성된 일반 래퍼입니다. 여기에서 자세한 내용을 확인할 수 있습니다. RDT Patterns
  • ExpandedComponent 기본 해부학:

    • <ExpandedWrapper>
  <Item label="ColumnName">{plainValue}</Item>
  <Item label="ColumnName"><span>children</span></Item>
</ExpandedWrapper>


  • ExpandedWrapper 및 Item는 무엇입니까? 둘 다 스타일 일관성을 유지하는 데 사용되는 단일 구성 요소이며 원하는 대로 고유한 구성 요소를 만들 수 있습니다.
  • ExpandedWrapper
    const ExpandedWrapper = ({ children }) => {
  return (
    <div className="grid text-sm mr-4">
      {children}
    </div>
  )
}

  • Item
    const Item = ({ label, children }) => {
  return (
    <div className="flex">
      <div className="max-w-max my-2 ml-16 font-semibold">
        <span>{label}</span>
      </div>
      <div className="max-w-max my-2 ml-4">
        <span>{children}</span>
      </div>
    </div>
  )
}



    • 문제가 무엇입니까?



    이에 대한 대답은 매우 간단합니다. Datatable 구성 요소에는 data 소품이 있고 이것은 확장된 구성 요소에서 자동으로 공유되지만 작업 버튼이나 링크에 기능을 제공해야 하는 경우 다음을 위한 기능을 만들어야 합니다. "메인 구성 요소"의 데스크톱 보기 및 "확장 구성 요소"의 모바일 기능, 따라서 여기에서 React Context는 코드 한 줄을 사용하여 코드 중복을 방지하는 데 도움이 됩니다.
  • ExpandedComponentProvider 

    • import { createContext } from 'react'
const ExpandedComponentContext = createContext()

const ExpandedComponentProvider = ({ children, ...rest }) => {
  return (
    <ExpandedComponentContext.Provider value={{ ...rest }}>
      {children}
    </ExpandedComponentContext.Provider>
  )
}

export { ExpandedComponentProvider, ExpandedComponentContext }


  • useExpandedComponent 

    • import { useContext } from 'react'
import { ExpandedComponentContext } from 'contexts/ExpandedComponentProvider'

const useExpandedComponent = () => {
  const context = useContext(ExpandedComponentContext)

  if (context === undefined) {
    throw new Error(
      'useExpandedComponent must be used within a ExpandedComponentProvider'
    )
  }

  return context
}

export default useExpandedComponent


    이제 ExpandedComponentProvider를 사용하여 테이블을 래핑하여 원하는 모든 함수 또는 소품을 공유한 다음 확장된 구성 요소에서 후크useExpandedComponent를 사용하여 모두 가져오고 원하는 대로 사용할 수 있습니다. 참고: expandableRows는 예를 들어 창 너비를 가져오는 함수 또는 미디어 쿼리를 사용하여 확장된 구성 요소를 사용하려는 경우 제어해야 하는 플래그입니다. 예를 들면 다음과 같습니다.

    import { useCallback, useMemo } from 'react'
import { Table } from 'components/Table'
import { ExpandedComponentProvider } from 'contexts/ExpandedComponentProvider'
import ExpandedExampleComponent from 'components/ExpandedExampleComponent'

const Example = () => {
  const data = [
    {
      attribute1: 'attribute1'
    },
    {
      attribute2: 'attribute2'
    },
    {
      attribute3: 'attribute3'
    }
  ]

  const handleClick = useCallback(
    (url) => () => {
      window.open(url, '_blank', 'noopener,noreferrer,resizable')
    }, [])

  const columns = useMemo(() => [
    {
      name: 'Column name 1',
      id: 'columnId1',
      selector: ({ attribute1 }) => attribute1
    },
    {
      name: 'Column name 2',
      id: 'columnId2',
      selector: ({ attribute2 }) => attribute2
    },
    {
      name: 'Actions',
      id: 'actions',
      cell: ({ attribute3 }) => (
        <span onClick {handleClick(attribute3)}Action 1</span>
      ),
      hide: 'md'
    }
    // more columns...
  ], [])

  return (
    <ExpandedComponentProvider onClick={handleClick}>
      <Table
        name="demo"
        columns={columns}
        data={data || []}
        expandableRows
        expandableRowsComponent={ExpandedExampleComponent}
    // more props...
      />
    </ExpandedComponentProvider>
  )
}

export default Example


    및 ExpandedExampleComponent:

    import { Item, ExpandedWrapper } from 'components/Table'
import useExpandedComponent from 'hooks/useExpandedComponent'

const ExpandedExampleComponent = ({ data }) => {
  const { onClick } = useExpandedComponent()
  const { attribute1, attribute2, attribute3 } = data

  return (
    <ExpandedWrapper>
      <Item label="Column Name 1">{attribute1}</Item>
      <Item label="Column Name 2">{attribute2}</Item>
      <Item label="Actions">
    <span onClick={onClick(attribute3)}Action 1</span>
      </Item>
    </ExpandedWrapper>
  )
}

export default ExpandedExampleComponent


    실시간 미리보기:





    저장소: https://github.com/AgusRdz/rdt-context-demo



    마지막 생각들



    보시다시피 RDT를 사용하여 놀라운 테이블을 만들 수 있고 React Context와 함께 사용하면 많은 노력 없이 쉽게 처리할 수 있는 방법을 추가할 수도 있습니다.

    이 작은 기여가 테이블 구현 시간을 줄이는 데 도움이 되기를 바랍니다. 저에게는 코드 반복을 피하는 동시에 유지 관리를 더 쉽게 만드는 작업이 매우 쉬웠습니다.

    행복한 코딩!
    Python 배우기 #6 - 나열해 봅시다...
    앱 디자인에 맞게 Material UI 구성요소를 변경하는 방법 1부

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage