I use the TABULATOR library, but the clear button on the list editor does not appear.

I am developing a website through Microsoft’s power pages. In the power pages, to manipulate dom, a click button or table has to be created only by using the jquery document ready method. Is it a problem that I cannot create dom because I put it in the document ready method?

Please help me

 $(document).ready(async function() {

    let initDutyDescList = await getDutyDescList(); //get data from sever

    var table = new Tabulator("#dutyDescTable", {
        height: 300, // 테이블 높이 설정
        data: initDutyDescList, // 데이터 배열
        layout: "fitColumns",  // 열이 테이블에 맞게 조정
        movableColumns: true, // 열을 드래그하여 옮길 수 있도록 설정
        rowSelection: "checkbox", // 각 행에 체크박스 추가
        downloadConfig :{ 
            columnGroups : false , //다운로드한 테이블의 열 헤더에 열 그룹을 포함하지 않음 
        },
        columnHeaderVertAlign:"middle",
        columns: [ // 테이블 열 정의
        {
            formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", 
            headerSort:false, width:30, headerHozAlign: "center"
        },
        {
            title:"No.", formatter:"rownum"
            , width:35 
            , headerSort:false,
        },
        {
            title : "업무기술서",
            headerHozAlign: "center",
            columns : [
            {
                title: "활동주기",
                field: "icfr_activity_cycle_formattedValue",
                editor: "list", // 'editor' 속성에 'list' 에디터 설정
                editorParams: {
                  values: ["일", "월", "발생시", "분기", "반기"],
                  clearable: true, // 'clearable' 옵션을 'editor' 속성에 직접 설정
                  listOnEmpty: true,
                },
              },

            ]
        }  
        ]
      });
    });

I tried customizing it, but it wasn’t satisfactoryㅇ