데이터 그리드 (Mui-X)
X2beeDataGrid
3
컴포넌트 사용 가이드
<Box sx={{ height: '500px' }}>
<X2beeDataGrid
dataRef={dataRef}
apiRef={apiRef}
columns={columns}
checkboxSelection
onCellDoubleClick={onCellDoubleClickHandler}
slotProps={{
columnsManagement: { getTogglableColumns: () => columns.map((el) => el.field) },
baseCheckbox: { disabled: baseCheckboxDisable }
}}
slots={{
toolbar: () => CustomButtons({
changeCheckBoxSelectable: (value) => setBaseCheckboxDisable(!value)
})
}}
// pagination용 추가가 필요한 props
paginationProps={{ fetch: async (paginationModel) => fetch(paginationModel.page, paginationModel.pageSize) }}
/>
</Box>그리드 API
2
2. API 객체 활용 가이드
const dataRef = useDataRef();
const apiRef = useGridApiRef();
return (
<>
<Box>
<Markdown children={content} />
</Box>
<Stack direction="column">
<Box sx={{ border: 1 }}>데이터 출력</Box>
<Box sx={{ border: 1 }}>{JSON.stringify(showData)}</Box>
</Stack>
<Stack direction="row" borderBottom={1}>
<Button onClick={() => setShowData(dataRef.current.create())}> 추가 데이터 가져오기 </Button>
<Button onClick={() => setShowData(dataRef.current.update())}> 수정 데이터 가져오기 </Button>
<Button onClick={() => setShowData(dataRef.current.delete())}> 삭제 데이터 가져오기 </Button>
<Button onClick={() => setShowData(dataRef.current.all())}> 모든 데이터 가져오기 </Button>
</Stack>
<Box height="500px">
<X2beeDataGrid
columns={columns}
rows={gridSampleRows}
dataRef={dataRef}
apiRef={apiRef}
enableRowState
// pagination을 위한 추가 props
fetchSave={(allGridData, validation) => {
const errorMessage = validation();
if (errorMessage) alert(errorMessage);
}}
/>
</Box>
</>
);X2beeDataColDef
2
2. 확장된 컬럼 타입 정의 및 유효성 검증 가이드
const cols: X2beeGridColDef[] = [
{
headerName: '상품번호',
field: 'goodsNo',
editable: true,
width: 150,
validBlank: '상품번호를 입력해 주세요',
validation: [
{
valid: (params) => {
if (params.otherProps.goodsType === '묶음상품') {
const typeInt = parseInt(params.value as string, 10) ?? 1000
return typeInt >= 1000
}
return true
},
message: '묶음상품인경우 상품번호가 1000보다 커야합니다'
},
{
valid: (params) => {
if (params.otherProps.goodsType === '일반상품') {
const typeInt = parseInt(params.value as string, 10) ?? 1000
return typeInt < 1000
}
return true
},
message: '일반상품인경우 상품번호가 1000보다 작아야합니다'
}
]
},
{
headerName: '상품명',
field: 'goodsNm',
type: 'string',
editable: true,
width: 150,
validBlank: true,
validation: [
{
valid: (params) => {
const allRow = params.apiRef.current.getRowModels()
const allRowIds = params.apiRef.current.getAllRowIds()
return allRowIds.every(
(id) => params.id === id || allRow.get(id)?.[params.field] !== params.value
)
},
message: '중복된 상품명은 사용할수 없습니다.'
}
]
},
{
headerName: '상품타입',
field: 'goodsType',
type: 'singleSelect',
valueOptions: [...GoodsTypeArr],
defaultValue: GoodsTypeArr[0],
editable: true,
width: 150
},
{
headerName: '가격',
field: 'price',
type: 'number',
editable: true,
width: 150,
validation: [
{
valid: (params) => (params.value as number) > 0,
message: '가격은 0보다 커야합니다'
}
]
},
{
headerName: '등록일',
field: 'regDate',
editable: true,
width: 150,
defaultValue: dayjs().format(),
dateEditor: {
type: 'date',
dateFormat: 'YYYYMMDD',
minDate: dayjs().format(),
maxDate: '2050-12-31'
}
}
]Common-toolbar
2
2. 툴바 확장 및 커스터마이징 가이드
<X2BeeDataGrid
...
slots={{
toolbar: () => (
<Toolbar.Container
leftSlot={
<>
<Toolbar.Button type="add" title="기획전 등록" onClick={() => console.log('등록 팝업')} />
<Toolbar.Button type="remove" />
<Toolbar.Button type="resetAll" />
<Toolbar.Button type="save" />
<Toolbar.Button type="custom" title="일괄 변경" onClick={() => console.log('일괄 변경')} />
</>
}
rightSlot={
<>
<Toolbar.Button type="excel" />
<Toolbar.Button type="custom" title="복사" onClick={() => console.log('복사')} />
</>
}
/>
)
}}
/>