📑 AG GRID

// processColumns.ts

const columnType = (data: any) => {
  if (
    typeof data === 'string' ||
    typeof data === 'boolean' ||
    typeof data === 'number' ||
    data === null
  )
    return 'column';
  else if (typeof data === 'object' && Object.keys(data)[0] === '0') return 'array';
  else if (Array.isArray(data)) return 'array';
  else return 'group';
};

export const gridMethods = {
  makeSources: async (datas: any) => {
    if (Array.isArray(datas.value)) {
      return await Promise.all(
        datas.value.map((item: any) => {
          const keys = Object.keys(item);
          const source = {} as { [column: string]: string };
          keys.forEach((key) => {
            const type = columnType(item[key]);
            if (type === 'column') source[key] = item[key];
            if (type === 'group') {
              const fields = Object.keys(item[key]);
              fields.forEach((field) => {
                source[field] = item[key][field];
              });
            }
          });
          return { ...source };
        })
      );
    }
  },
  setColumns: async (datas: any, columnList: any) => {
    const processedDatas = await gridMethods.makeSources(datas);
    if (processedDatas) {
      processedDatas.forEach((data) => {
        const columns = data;
        columnList.value = [];
        const fields = Object.keys(columns);

        fields.forEach((field: any) => {
          if (columns[field]) {
            columnList.value.push({
              headerName: field,
            });
          }
        });
      });
    }
  },
};

<AgGrid
  v-model:datas="propDatas"
  :column-list="fieldList"
  :settings="gridSettings"
  :style="`width: 1000px; height: 100%`"
  @row-selected="onRowSelected"
/>

// vue 파일의 script 내부 코드 중 일부분
import { AgGrid } from '[AgGrid Component 생성한 파일]'

const getData = async () => {
  const query = JSON.stringify({});
  const res = await getTenants({ query });

  if (res.data.value.statusCode === 200) datas.value = res.data.value.data;

  columns.value = [
    'companyName',
    'tenantName',
    'companyContactEmail',
    'companyContactName',
    'companyContactPhone',
    'companyBusinessNumber',
    'startDate',
    'dueDate',
  ];

  columns.value.forEach((column: any) => {
    if (column) fieldList.value.push({ field: column });
  });
};

const setTableDatas = async () => {
  await getData();
  await gridMethods.setColumns(datas, columnList);
  propDatas.value = await gridMethods.makeSources(datas);
};

onMounted(async () => {
  await setTableDatas();
});