HTML

return (
<>

  <div className="pageArea" id="pageArea" style={{ height: '100%' }}>
    <TcLoading visible={loadPanelVisible} container={'.content'} />
    <Box
      direction={globalSetting.pageAlignVertical ? 'col' : 'row'}
      width="100%"
      height="100%"
      crossAlign="stretch"
    >
      <Item
        ratio={globalSetting.pageFilterShow ? 0 : 0}
        height="100%"
        baseSize={globalSetting.pageFilterShow ? 'auto' : 0}
      >
        <TcFilterArea
          pageModel={pageModel}
          handlePageConfig={handlePageConfig}
          handlerSearch={btnSearchClickHandler}
          handleFilterValues={handleFilterValues}
          getIsFilterShow={getIsFilterShow}
        />
      </Item>
      <Item ratio={1} baseSize={'100%'}>
        {/* <TcLayout1>
          <Item ratio={0} baseSize={defectScrapGridShow ? '720px' : '60px'}>
            <TcExpandableDiv
              title={local('LIST')}
              scrollViewHeight={'670px'}
              isFilterShow={defectScrapGridShow}
              onBtnClick={(e) => {
                setDefectScrapGridShow(e);
              }}
            > */}
            <TcContentArea height={globalSetting.pageAlignVertical ? `100%` : '100%'}> 
              <div id="data-grid-demo">
                <DataGrid
                  height={globalSetting.pageFilterShow ? 'calc(100vh - 300px)' : '780px'}
                  ref={defectScrapGrid}
                  // keyExpr={[]}
                  dataSource={defectScrapData}
                  showBorders={true}
                  showColumnLines={true}
                  showRowLines={true}
                  allowColumnReordering={false}
                  allowColumnResizing={true}
                  width={'100%'}
                  columnResizingMode="widget"
                  columnAutoWidth={true}
                  onExporting={onExporting}
                  loadPanel={{ enabled: false }}
                  onSelectionChanged={onSelectionChanged}
                >
                  {/* Columns */}
                  {/* 재고반영일자 */}
                  <Column dataField={'date'} caption={local('재고반영일자')} visible={true}/>
                  {/* LOTID */}
                  <Column dataField={'lotid'} caption={local('LOTID')} visible={true}/>
                  {/* 품목 */}
                  <Column dataField={'productdefinitionid'} caption={local('PRODUCTDEFINITIONID')} visible={true}/>
                  {/* 품목명 */}
                  <Column dataField={'productdefinitionname'} caption={local('PRODUCTDEFINITIONNAME')} visible={true}/>
                  {/* 품목중량(KG) */}
                  <Column dataField={'weight'} caption={local('WEIGHT')} visible={true} format={{ type: "fixedPoint", precision: 3 }}/>
                  {/* 현재고 */}
                  <Column dataField={'productquantity'} caption={local('PRODUCTQUANTITY')} visible={true}/>
                  {/* 스크랩처리수량 */}
                  <Column dataField={'scrapquantity'} caption={local('SCRAPQUANTITY')} visible={true}/>
                   {/* 스크랩처리중량 */}
                  <Column dataField={'scrapweight'} caption={local('SCRAPWEIGHT')} visible={true} format={{ type: "fixedPoint", precision: 3 }}/>
                  
                  <Summary>
                    <TotalItem
                      column="weight"
                      summaryType="sum"
                      displayFormat="Total : {0} KG"
                      valueFormat={{ type: "fixedPoint", precision: 3 }}
                    />
                    <TotalItem
                      column="productquantity"
                      summaryType="sum"
                      displayFormat="Total : {0} EA"
                    />
                    <TotalItem
                      column="scrapquantity"
                      summaryType="sum"
                      displayFormat="Total : {0} EA"
                    />
                    <TotalItem
                      column="scrapweight"
                      summaryType="sum"
                      displayFormat="Total : {0} KG"
                      valueFormat={{ type: "fixedPoint", precision: 3 }}
                    />
                  </Summary>
                  <Sorting mode="multiple" />
                  <Selection mode="multiple" />
                  <Paging defaultPageSize={100} enabled={true} />
                  <SearchPanel visible={gridFilterRowVisible} width={240} placeholder="Search..." />
                  <Export enabled={true} />
                  <ColumnChooser enabled={true} />
                  <FilterRow visible={gridFilterRowVisible} applyFilter="auto" />
                  <Toolbar>
                    <Item
                      name="columnChooserButton"
                      location="before"
                      options={{ stylingMode: 'text' }}
                    />
                    <Item name="exportButton" location="before" options={{ stylingMode: 'text' }} />
                    <Item location="before" name="Usable">
                      <Button
                        icon="filter"
                        type="normal"
                        stylingMode="text"
                        onClick={btnFilterClick}
                      />
                    </Item>
                    <Item location="after" name="Usable">
                      <Button
                        text={local('CONFIRM')}
                        type="success"
                        stylingMode="contained"
                        onClick={btnConfirmClickHandler}
                      />
                    </Item>
                    <Item name="searchPanel" location="before" />
                  </Toolbar>
                </DataGrid>
              </div>
            </TcContentArea>
            {/* </TcExpandableDiv>
          </Item>
        </TcLayout1> */}
      </Item>
    </Box>
  </div>
</>

);