Wisenet Cloud Data Grid (cell range selectable)

Props

//페이징 가능여부(boolean), (true일떄 하단 페이징 컴퍼넌트가 보여짐)
enablePaging={false}

// 각 row앞에 checkbox를 기능을 가능하게 하는 여부(boolean)
isCheckMode={false}

//그리드를 range select 가능하게 하는 여부 (boolean)
isDraggable={false}

// ??
enableInput={false}

// datagrid의 로딩값 (boolean)
gridLoading={installService.gridLoading}

// datagrid의 바인딩될 arrayList 값
rows={installService.historyList}


// datagrid의 바인딩될 header값
header={GridHeaders.historyHeader}


// datagrid의 rowList를 2d배열로 셋팅
setGridData2dArray={(rowList) => {
    
}}

// 메모의 save 버튼을 클릭했을데 발생하는 이벤트 리스너
onClickMemoSaveBtn={async (columnOne, colIndex, rowItemOne, rowIndex, gridData) => {
  
}}

// 메모 컬럼의 inputText의 초기 ArrayList)
editModeList={installService.editModeList}

// 메모 컬럼의 연필 버튼 , save 버튼을 눌러을때 발생하는 이벤트 리스너
onToggleEditMode={(rowIndex)=>{
  
}}

//로우를 클릭했을때 다움 페이지로 push 가능 여부
enablePush={false}

//디바이스 그리드 여뷰
isDeviceGrid={false}

//페이지 싸이즈 (for paging)
pageSize={10}

//테이블의 높이 (그 이상 데이터는 스크롤링 되게 처리)
tableHeight={450}

해더 예제

class _GridHeaders {

projectHeader = [
    {
        key: "id",
        title: "id",
        index: 0,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: 10,
    },
    {
        key: "name",
        title: "Project",
        index: 1,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "role",
        title: "Role",
        index: 2,
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "date",
        title: "Date",
        index: 3,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "date2",
        title: "Date2",
        index: 3,
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "id",
        title: "Device",
        index: 5,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "shared_status",
        title: "Members",
        index: 6,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        isSharedStatus: true,
        width: window.innerWidth / 4,
    },
]

sharedProjectHeader = [
    {
        key: "id",
        title: "id",
        index: 0,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: 10,
    },
    {
        key: "name",
        title: "Project",
        index: 1,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "role",
        title: "Role",
        index: 2,
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "date",
        title: "Date",
        index: 3,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "date2",
        title: "Date2",
        index: 3,
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "id",
        title: "Device",
        index: 5,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 4,
    },
    {
        key: "shared_status",
        title: "Owner",
        index: 6,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        isSharedStatus: true,
        width: window.innerWidth / 4,
    },
    {
        key: "Members",
        title: "Members",
        index: 7,
        hidden: false,
        enableInput: false,
        enableMemo: false,
        isSharedStatus: true,
        width: window.innerWidth / 4,
    },
]

historyHeader = [
    {
        key: "qprojectHistoryId",
        title: 'qprojectHistoryId',
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    },
    {
        key: "action",
        title: 'History',
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    },
    {
        key: "created",
        title: 'created',
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    },
    {
        key: "actor",
        title: 'User',
        hidden: false,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
        isSharedStatus: true,
    },
    {
        key: "userId",
        title: 'userId',
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    },
    {
        key: "memo",
        title: 'Memo',
        hidden: false,
        enableInput: false,
        enableMemo: true,
        width: window.innerWidth / 7,
    },

    {
        key: "firstName",
        title: 'firstName',
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    },
    {
        key: "lastName",
        title: 'lastName',
        hidden: true,
        enableInput: false,
        enableMemo: false,
        width: window.innerWidth / 7,
    }
]


deviceDataHeader = [
    {
        key: "qprojectDataId",
        title: 'qr프로젝트id',
        hidden: false,
        enableInput: false,
        width: 200,

    },
    {
        key: "model",
        title: 'Model',
        hidden: false,
        enableInput: false,
        width: 200,
    },
    {
        key: "mac",
        title: 'MAC',
        hidden: false,
        enableInput: false,
        width: 200,
    },
    {
        key: "serial",
        title: 'SN',
        hidden: false,
        enableInput: false,
        width: window.innerWidth / 10,
    },
    {
        key: "ip",
        title: 'IP',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "gateway",
        title: 'Gateway',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "subnetmask",
        title: 'Subnet',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "dns1",
        title: 'DNS1',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "dns2",
        title: 'DNS2',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "http",
        title: 'HTTP',
        hidden: false,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "https",
        title: 'HTTPS',
        hidden: true,
        enableInput: true,
        width: window.innerWidth / 10,
    },
    {
        key: "rtsp",
        title: 'RTSP',
        hidden: true,
        enableInput: false,
        width: window.innerWidth / 10,
    },
    {
        key: "password",
        title: 'PASSWORD',
        hidden: true,
        enableInput: false,
        width: window.innerWidth / 10,
    },
]

deviceDataHeaderForExport = [

    {
        "key": "Model",
    },
    {
        "key": "MAC",
    },
    {
        "key": "Serial",
    },
    {
        "key": "PW",
    },
    {
        "key": "IP",
    },
    {
        "key": "Gateway",
    },
    {
        "key": "SubnetMask",
    },
    {
        "key": "DNS1",
    },
    {
        "key": "DNS2",
    },
    {
        "key": "Http",
    },
    {
        "key": "Https",
    },
    {
        "key": "RTSP",
    },
]

}