[AG Grid], [TanStack Table] 행 번호 붙이기

테이블을 만들다보면 행 번호를 붙여야 하는 상황들이 많다.
아래와 같이 columnDef에 행 번호를 붙여주는 컬럼을 만들어 줄 수 있다.
필터 처리나 검색을 했을 때도 행 번호가 자동으로 조정된다. 
 

AG Grid 에서 행 번호 컬럼 생성

 

  const columnDefs = [
   {
      headerName: `${t('text.number')}`,
      field: 'number',
      valueGetter: 'node.rowIndex + 1',
      maxWidth: 100,
      minWidth: 100,
    },
    {
    // 다른 column 정의
    },
  ]

 

TanStack Table 에서 행 번호 컬럼 생성

const exampleColumnDefs: ColumnDef<IExampleContent>[] = [
  {
      header: `${t('text.number')}`,
      size: 40,
      minSize: 30,
      maxSize: 40,
      enableSorting: false,
      meta: {
        indexed: true,
      },
    },
    {
    // 다른 column 정의
    },
]