[NodeJS] Material-React-Table 사용법

https://www.material-react-table.com/

Material React Table V2

 

 

column 설정

      {
        accessorKey: "TestColumn1", // 데이터에서 key 값
        header: "TestColumn1", // Table에서 보여지는 값
        editVariant: "select", // TextField를 Select형태로 사용하는 설정
        editSelectOptions: list_TestColumn1, // Select MenuItem 설정 ex) [1,2,3]
        muiEditTextFieldProps: ({ cell, row, table }) => ({ // TextFieldProps 관련 설정
          select: true,
          required: true, // UI에 *로 표기하는 설정
          value: row._valuesCache.TestColumn1 ?? "", // TextFieldProps.value 값 설정
          onChange: e => {
            if (e.target.value) {
              row._valuesCache.TestColumn2 = ""; // 값 변경시, 연동된 다른 Column 값 초기화
              table.setCreatingRow(true); // setCreatingRow 필수. Edit 일 경우 setEditingRow 사용
            }
          }
        }),
        enableColumnOrdering: false // Drag&Drop으로 Column 이동 불가하도록 설정
      },

 

 

 

useMaterialReactTable 설정

  const table = useMaterialReactTable({
    columns,
    data,
    enableColumnOrdering: false, // Drag&Drop으로 Column 이동 하는 기능 해제
    enableColumnFilters: false, // Column 관련 Filter 기능 해제
    enableColumnActions: true, // Column Header에 점 3개로 설정할 수 있는 기능 해제
    enableSorting: false, // Column Header에서 Soring 기능 해제
    enableGrouping: true, // Grouping 기능 사용
    initialState: {
      expanded: true, //expand all groups by default
      grouping: ["Test_Column1"], // Test_Column1을 기준으로 Grouping 설정
      pagination: { pageIndex: 0, pageSize: 20 },
      sorting: [{ id: "Test_Column1", desc: false }] //sort by state by default
    },
    muiTableContainerProps: { sx: { maxHeight: 700 } },
    enableEditing: true, // RowActions 가능하도록, 버튼 보이도록 설정
    enableToolbarInternalActions: false, // Toolbar의 기본 버튼 보이지 않도록 설정
    positionToolbarAlertBanner: "none", // Toolbar의 Description 영역(선택 개수, Group By) 등 안보이도록 설정
    renderRowActions: ({ row, table }) => ( // Row Actions Customize
      <Box sx={{ display: "flex", gap: "1rem" }}>
        <Tooltip title="Delete">
          <IconButton color="error" onClick={() => table.setEditingRow(row)}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      </Box>
    ),
    renderCreateRowDialogContent: ({ table, row, internalEditComponents }) => ( // Create Row Dialog Customize
      <div>
        <DialogTitle variant="h5">Create New Test</DialogTitle>
        <DialogContent sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
          {internalEditComponents} {/* or render custom edit components here */}
        </DialogContent>
        <DialogActions>
          <MRT_EditActionButtons variant="text" table={table} row={row} />
        </DialogActions>
      </div>
    ),
    onCreatingRowSave: handleCreateTest, // Creating Row 후 Save시 동작할 Function 설정
    renderTopToolbarCustomActions: ({ table }) => ( // Toolbar에 Button 추가
      <Button variant="contained" onClick={() => table.setCreatingRow(true)}>
        Create New Test
      </Button>
    )
  });