diff --git a/.changeset/neat-sheep-collect.md b/.changeset/neat-sheep-collect.md
new file mode 100644
index 0000000..c19d16f
--- /dev/null
+++ b/.changeset/neat-sheep-collect.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+allow autocompletion for DataGrid's renderCell
diff --git a/packages/react/src/components/DataGrid/DataList.tsx b/packages/react/src/components/DataGrid/DataList.tsx
index bf11551..b7b6a43 100644
--- a/packages/react/src/components/DataGrid/DataList.tsx
+++ b/packages/react/src/components/DataGrid/DataList.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { BaseProps, DataGrid } from ":/components/DataGrid/index";
+import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index";
 
-export const DataList = ({ rows, ...props }: BaseProps) => {
+export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
   return <DataGrid {...props} displayHeader={false} rows={rows} />;
 };
diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
index 5a22fa1..abdca80 100644
--- a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
+++ b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
@@ -10,18 +10,18 @@ import {
 /**
  * Handles sorting, pagination.
  */
-export const SimpleDataGrid = ({
+export const SimpleDataGrid = <T extends Row>({
   rows,
   defaultPaginationParams,
   defaultSortModel = [],
   ...props
-}: BaseProps & {
+}: BaseProps<T> & {
   /** Pagination default props, should never change. */
   defaultPaginationParams?: Parameters<typeof usePagination>[0] | boolean;
   /** Pagination default props, should never change. */
   defaultSortModel?: SortModel;
 }) => {
-  const [realRows, setRealRows] = useState<Row[]>([]);
+  const [realRows, setRealRows] = useState<T[]>([]);
   const [sortModel, setSortModel] = useState<SortModel>(defaultSortModel);
   const realPaginationParams = useMemo(() => {
     if (typeof defaultPaginationParams === "boolean") {
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index 2264771..caf4e16 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -173,7 +173,7 @@ export const FullServerSide = () => {
       sort: "desc",
     },
   ]);
-  const [rows, setRows] = useState<any[]>([]);
+  const [rows, setRows] = useState<typeof database>([]);
 
   useEffect(() => {
     // Simulate server-side fetching.
@@ -258,19 +258,29 @@ export const DataListOnly = () => {
         id: `list key for element ${index}`,
         title: faker.random.word(),
         date: faker.date.past(1).toISOString(),
-        action: (
-          <Button size="small" color="secondary">
-            Do it
-          </Button>
-        ),
       })),
     []
   );
-  const columns = [{ field: "title" }, { field: "date" }, { field: "action" }];
 
   return (
     <CunninghamProvider>
-      <DataList rows={database} columns={columns} />
+      <DataList
+        rows={database}
+        columns={[
+          { field: "title" },
+          { field: "date" },
+          {
+            headerName: "action",
+            renderCell: () => {
+              return (
+                <Button size="small" color="secondary">
+                  Do it
+                </Button>
+              );
+            },
+          },
+        ]}
+      />
     </CunninghamProvider>
   );
 };
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index bc2467e..a2bbd57 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -37,7 +37,7 @@ export interface BaseProps<T extends Row = Row> {
   columns: Column<T>[];
   rows: T[];
   isLoading?: boolean;
-  enableRowSelection?: boolean | ((row: T) => boolean);
+  enableRowSelection?: TableOptions<T>["enableRowSelection"];
   onRowSelectionChange?: (newSelection: RowSelectionState) => void;
   rowSelection?: RowSelectionState;
 }
@@ -47,11 +47,11 @@ interface Props<T extends Row = Row> extends BaseProps<T> {
   sortModel?: SortModel;
   onSortModelChange?: (newSortModel: SortModel) => void;
   /** Options for the underlying tanstack table. */
-  tableOptions?: TableOptions<Row>;
+  tableOptions?: TableOptions<T>;
   displayHeader?: boolean;
 }
 
-export const DataGrid = ({
+export const DataGrid = <T extends Row>({
   columns,
   rows,
   pagination,
@@ -63,7 +63,7 @@ export const DataGrid = ({
   rowSelection,
   tableOptions,
   displayHeader = true,
-}: Props) => {
+}: Props<T>) => {
   const { t } = useCunningham();
   const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
 
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index 0445519..6cf051e 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -1,32 +1,27 @@
 import {
-  CellContext,
   ColumnDef,
   createColumnHelper,
   PaginationState,
   SortingState,
 } from "@tanstack/react-table";
-import React, { ReactNode } from "react";
-import {
-  ColumnDefBase,
-  DisplayColumnDef,
-} from "@tanstack/table-core/src/types";
+import React from "react";
 import { Checkbox } from ":/components/Forms/Checkbox";
 import { PaginationProps } from ":/components/Pagination";
-import { Column, Row, SortModel } from ":/components/DataGrid/index";
+import { BaseProps, Column, Row, SortModel } from ":/components/DataGrid/index";
 import { useCunningham } from ":/components/Provider";
 
 /**
  * Converts Cunningham's columns to the underlying tanstack table.
  */
-export const useHeadlessColumns = ({
+export const useHeadlessColumns = <T extends Row>({
   columns,
   enableRowSelection,
 }: {
-  columns: Column[];
-  enableRowSelection?: boolean | ((row: Row) => boolean);
-}): ColumnDef<Row, any>[] => {
+  columns: Column<T>[];
+  enableRowSelection?: BaseProps<T>["enableRowSelection"];
+}): ColumnDef<T, any>[] => {
   const { t } = useCunningham();
-  const columnHelper = createColumnHelper<Row>();
+  const columnHelper = createColumnHelper<T>();
   let headlessColumns = columns.map((column) => {
     const opts = {
       id: column.field ?? "actions",
@@ -34,7 +29,9 @@ export const useHeadlessColumns = ({
       header: column.headerName,
     };
     if (column.field) {
-      return columnHelper.accessor(column.field, opts);
+      // The any cast is needed because the type of the accessor is hard-defined on react-table.
+      // On our side we only use string as type for simplicity purpose.
+      return columnHelper.accessor(column.field as any, opts);
     }
     return columnHelper.display({
       ...opts,