Sorting columns with POM in Playwright Typescript not working

I want to fetch column1, column2,ect.. values and sort the column accordingly. Below is the HTML structure. Im unable to locate and fetch the column values.

When Im running the below code, Im getting empty list in 'allValues'. Please help me where I made a mistake.

my html

    <div role="gridcell" aria-colindex="1">
     <div> value 1 </div>
    </div>
    <div role="gridcell" aria-colindex="1">
     <div> value 2 </div>
    </div>
<!-- More rows... -->
   

my test file

  test("sorting columns data", async ({ page }) => {

  const sortColumn = new SortColumns(page, "1");
  const columnValues = await sortColumn.getColumnValues();
  console.log(columnValues);
  const sortedNames = [...columnValues].sort();
  expect(columnValues).toEqual(sortedNames);

});

sort-columns.ts file

import { type Locator, type Page } from "@playwright/test";

export class SortColumns {
 columnValue: Locator;
 page: Page;

 constructor( page: Page,  element: string ) {

   this.page = page;
   this.columnValue =  page.locator(`[role=aria-colindex]`, { hasText: element });
   console.log("test: "+this.columnValue);

 }

async getColumnValues() {
  const allValues = await this.columnValue.allInnerTexts();
  console.log(allValues);
  return allValues.slice(1); // Remove header
}

}

First, aria-colindex is not a role. And second, hasText is not applied to the column you used in the locator. It's used to filter the text of the element.
You could do something like this:

const columns = page.locator(`[aria-colindex="${element}"]`);