diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
index 5f89f13846..ef26ff829e 100644
--- a/examples/react/basic/src/main.tsx
+++ b/examples/react/basic/src/main.tsx
@@ -50,31 +50,31 @@ const columnHelper = createColumnHelper<Person>()
 
 const columns = [
   columnHelper.accessor('firstName', {
-    cell: info => info.getValue(),
-    footer: info => info.column.id,
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
   }),
-  columnHelper.accessor(row => row.lastName, {
+  columnHelper.accessor((row) => row.lastName, {
     id: 'lastName',
-    cell: info => <i>{info.getValue()}</i>,
+    cell: (info) => <i>{info.getValue()}</i>,
     header: () => <span>Last Name</span>,
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   }),
   columnHelper.accessor('age', {
     header: () => 'Age',
-    cell: info => info.renderValue(),
-    footer: info => info.column.id,
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
   }),
   columnHelper.accessor('visits', {
     header: () => <span>Visits</span>,
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   }),
   columnHelper.accessor('status', {
     header: 'Status',
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   }),
   columnHelper.accessor('progress', {
     header: 'Profile Progress',
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   }),
 ]
 
@@ -92,15 +92,15 @@ function App() {
     <div className="p-2">
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -108,9 +108,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -119,15 +119,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -149,5 +149,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/bootstrap/src/main.tsx b/examples/react/bootstrap/src/main.tsx
index f06911f9b4..626723a28d 100644
--- a/examples/react/bootstrap/src/main.tsx
+++ b/examples/react/bootstrap/src/main.tsx
@@ -16,30 +16,30 @@ import { makeData, Person } from './makeData'
 const columns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -47,17 +47,17 @@ const columns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -79,15 +79,15 @@ function App() {
     <div className="p-2">
       <BTable striped bordered hover responsive size="sm">
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -95,9 +95,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -106,15 +106,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -137,5 +137,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx
index 52fb33ad55..cc2e8b0473 100644
--- a/examples/react/column-dnd/src/main.tsx
+++ b/examples/react/column-dnd/src/main.tsx
@@ -23,52 +23,52 @@ const defaultColumns: ColumnDef<Person>[] = [
     accessorKey: 'firstName',
     id: 'firstName',
     header: 'First Name',
-    cell: info => info.getValue(),
-    footer: props => props.column.id,
+    cell: (info) => info.getValue(),
+    footer: (props) => props.column.id,
   },
   {
-    accessorFn: row => row.lastName,
+    accessorFn: (row) => row.lastName,
     id: 'lastName',
-    cell: info => info.getValue(),
+    cell: (info) => info.getValue(),
     header: () => <span>Last Name</span>,
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
   },
   {
     accessorKey: 'age',
     id: 'age',
     header: 'Age',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
   },
 
   {
     accessorKey: 'visits',
     id: 'visits',
     header: 'Visits',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
   },
   {
     accessorKey: 'status',
     id: 'status',
     header: 'Status',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
   },
   {
     accessorKey: 'progress',
     id: 'progress',
     header: 'Profile Progress',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
   },
 ]
 
 const reorderColumn = (
   draggedColumnId: string,
   targetColumnId: string,
-  columnOrder: string[]
+  columnOrder: string[],
 ): ColumnOrderState => {
   columnOrder.splice(
     columnOrder.indexOf(targetColumnId),
     0,
-    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string
+    columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string,
   )
   return [...columnOrder]
 }
@@ -87,14 +87,14 @@ const DraggableColumnHeader: FC<{
       const newColumnOrder = reorderColumn(
         draggedColumn.id,
         column.id,
-        columnOrder
+        columnOrder,
       )
       setColumnOrder(newColumnOrder)
     },
   })
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
     item: () => column,
@@ -122,13 +122,13 @@ function App() {
   const [columns] = React.useState(() => [...defaultColumns])
 
   const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(
-    columns.map(column => column.id as string) //must start out with populated columnOrder so we can splice
+    columns.map((column) => column.id as string), //must start out with populated columnOrder so we can splice
   )
 
   const regenerateData = () => setData(() => makeData(20))
 
   const resetOrder = () =>
-    setColumnOrder(columns.map(column => column.id as string))
+    setColumnOrder(columns.map((column) => column.id as string))
 
   const table = useReactTable({
     data,
@@ -157,9 +157,9 @@ function App() {
       <div className="h-4" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <DraggableColumnHeader
                   key={header.id}
                   header={header}
@@ -170,9 +170,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -181,15 +181,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -209,6 +209,6 @@ ReactDOM.createRoot(rootElement).render(
   // <React.StrictMode> //disabled for react-dnd preview bug for now
   <DndProvider backend={HTML5Backend}>
     <App />
-  </DndProvider>
+  </DndProvider>,
   // </React.StrictMode>
 )
diff --git a/examples/react/column-groups/src/main.tsx b/examples/react/column-groups/src/main.tsx
index cdb3d03271..faf6afa00f 100644
--- a/examples/react/column-groups/src/main.tsx
+++ b/examples/react/column-groups/src/main.tsx
@@ -56,39 +56,39 @@ const columns = [
     // footer: props => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
@@ -110,15 +110,15 @@ function App() {
     <div className="p-2">
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -126,9 +126,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -137,15 +137,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -167,5 +167,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-ordering/src/main.tsx b/examples/react/column-ordering/src/main.tsx
index 470e02d49e..edabce74a9 100644
--- a/examples/react/column-ordering/src/main.tsx
+++ b/examples/react/column-ordering/src/main.tsx
@@ -16,30 +16,30 @@ import { makeData, Person } from './makeData'
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -47,17 +47,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -91,7 +91,7 @@ function App() {
 
   const randomizeColumns = () => {
     table.setColumnOrder(
-      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
@@ -110,7 +110,7 @@ function App() {
             Toggle All
           </label>
         </div>
-        {table.getAllLeafColumns().map(column => {
+        {table.getAllLeafColumns().map((column) => {
           return (
             <div key={column.id} className="px-1">
               <label>
@@ -139,15 +139,15 @@ function App() {
       <div className="h-4" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -155,9 +155,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -166,15 +166,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -193,5 +193,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-pinning/src/main.tsx b/examples/react/column-pinning/src/main.tsx
index 6c862dc1b2..be674475d7 100644
--- a/examples/react/column-pinning/src/main.tsx
+++ b/examples/react/column-pinning/src/main.tsx
@@ -17,30 +17,30 @@ import { makeData, Person } from './makeData'
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -48,17 +48,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -97,7 +97,7 @@ function App() {
 
   const randomizeColumns = () => {
     table.setColumnOrder(
-      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
@@ -116,7 +116,7 @@ function App() {
             Toggle All
           </label>
         </div>
-        {table.getAllLeafColumns().map(column => {
+        {table.getAllLeafColumns().map((column) => {
           return (
             <div key={column.id} className="px-1">
               <label>
@@ -148,7 +148,7 @@ function App() {
           <input
             type="checkbox"
             checked={isSplit}
-            onChange={e => setIsSplit(e.target.checked)}
+            onChange={(e) => setIsSplit(e.target.checked)}
           />{' '}
           Split Mode
         </label>
@@ -157,16 +157,16 @@ function App() {
         {isSplit ? (
           <table className="border-2 border-black">
             <thead>
-              {table.getLeftHeaderGroups().map(headerGroup => (
+              {table.getLeftHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       <div className="whitespace-nowrap">
                         {header.isPlaceholder
                           ? null
                           : flexRender(
                               header.column.columnDef.header,
-                              header.getContext()
+                              header.getContext(),
                             )}
                       </div>
                       {!header.isPlaceholder && header.column.getCanPin() && (
@@ -212,15 +212,15 @@ function App() {
               {table
                 .getRowModel()
                 .rows.slice(0, 20)
-                .map(row => {
+                .map((row) => {
                   return (
                     <tr key={row.id}>
-                      {row.getLeftVisibleCells().map(cell => {
+                      {row.getLeftVisibleCells().map((cell) => {
                         return (
                           <td key={cell.id}>
                             {flexRender(
                               cell.column.columnDef.cell,
-                              cell.getContext()
+                              cell.getContext(),
                             )}
                           </td>
                         )
@@ -236,16 +236,16 @@ function App() {
             {(isSplit
               ? table.getCenterHeaderGroups()
               : table.getHeaderGroups()
-            ).map(headerGroup => (
+            ).map((headerGroup) => (
               <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => (
+                {headerGroup.headers.map((header) => (
                   <th key={header.id} colSpan={header.colSpan}>
                     <div className="whitespace-nowrap">
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </div>
                     {!header.isPlaceholder && header.column.getCanPin() && (
@@ -291,18 +291,18 @@ function App() {
             {table
               .getRowModel()
               .rows.slice(0, 20)
-              .map(row => {
+              .map((row) => {
                 return (
                   <tr key={row.id}>
                     {(isSplit
                       ? row.getCenterVisibleCells()
                       : row.getVisibleCells()
-                    ).map(cell => {
+                    ).map((cell) => {
                       return (
                         <td key={cell.id}>
                           {flexRender(
                             cell.column.columnDef.cell,
-                            cell.getContext()
+                            cell.getContext(),
                           )}
                         </td>
                       )
@@ -315,16 +315,16 @@ function App() {
         {isSplit ? (
           <table className="border-2 border-black">
             <thead>
-              {table.getRightHeaderGroups().map(headerGroup => (
+              {table.getRightHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       <div className="whitespace-nowrap">
                         {header.isPlaceholder
                           ? null
                           : flexRender(
                               header.column.columnDef.header,
-                              header.getContext()
+                              header.getContext(),
                             )}
                       </div>
                       {!header.isPlaceholder && header.column.getCanPin() && (
@@ -370,15 +370,15 @@ function App() {
               {table
                 .getRowModel()
                 .rows.slice(0, 20)
-                .map(row => {
+                .map((row) => {
                   return (
                     <tr key={row.id}>
-                      {row.getRightVisibleCells().map(cell => {
+                      {row.getRightVisibleCells().map((cell) => {
                         return (
                           <td key={cell.id}>
                             {flexRender(
                               cell.column.columnDef.cell,
-                              cell.getContext()
+                              cell.getContext(),
                             )}
                           </td>
                         )
@@ -401,5 +401,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-resizing-performant/src/main.tsx b/examples/react/column-resizing-performant/src/main.tsx
index 2c6c73a978..0e21cb346f 100644
--- a/examples/react/column-resizing-performant/src/main.tsx
+++ b/examples/react/column-resizing-performant/src/main.tsx
@@ -24,45 +24,45 @@ type Person = {
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         accessorKey: 'visits',
         header: () => <span>Visits</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         accessorKey: 'status',
         header: 'Status',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         accessorKey: 'progress',
         header: 'Profile Progress',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
@@ -132,7 +132,7 @@ function App() {
             columnSizingInfo: table.getState().columnSizingInfo,
           },
           null,
-          2
+          2,
         )}
       </pre>
       <div className="h-4" />({data.length} rows)
@@ -148,14 +148,14 @@ function App() {
           }}
         >
           <div className="thead">
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <div
                 {...{
                   key: headerGroup.id,
                   className: 'tr',
                 }}
               >
-                {headerGroup.headers.map(header => (
+                {headerGroup.headers.map((header) => (
                   <div
                     {...{
                       key: header.id,
@@ -169,7 +169,7 @@ function App() {
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                     <div
                       {...{
@@ -206,14 +206,14 @@ function TableBody({ table }: { table: Table<Person> }) {
         className: 'tbody',
       }}
     >
-      {table.getRowModel().rows.map(row => (
+      {table.getRowModel().rows.map((row) => (
         <div
           {...{
             key: row.id,
             className: 'tr',
           }}
         >
-          {row.getVisibleCells().map(cell => {
+          {row.getVisibleCells().map((cell) => {
             //simulate expensive render
             for (let i = 0; i < 10000; i++) {
               Math.random()
@@ -242,7 +242,7 @@ function TableBody({ table }: { table: Table<Person> }) {
 //special memoized wrapper for our table body that we will use during column resizing
 export const MemoizedTableBody = React.memo(
   TableBody,
-  (prev, next) => prev.table.options.data === next.table.options.data
+  (prev, next) => prev.table.options.data === next.table.options.data,
 ) as typeof TableBody
 
 const rootElement = document.getElementById('root')
@@ -251,5 +251,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-sizing/src/main.tsx b/examples/react/column-sizing/src/main.tsx
index cd48853c75..cc043f9945 100644
--- a/examples/react/column-sizing/src/main.tsx
+++ b/examples/react/column-sizing/src/main.tsx
@@ -51,30 +51,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -82,17 +82,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -129,7 +129,9 @@ function App() {
     <div className="p-2">
       <select
         value={columnResizeMode}
-        onChange={e => setColumnResizeMode(e.target.value as ColumnResizeMode)}
+        onChange={(e) =>
+          setColumnResizeMode(e.target.value as ColumnResizeMode)
+        }
         className="border p-2 border-black rounded"
       >
         <option value="onEnd">Resize: "onEnd"</option>
@@ -137,7 +139,7 @@ function App() {
       </select>
       <select
         value={columnResizeDirection}
-        onChange={e =>
+        onChange={(e) =>
           setColumnResizeDirection(e.target.value as ColumnResizeDirection)
         }
         className="border p-2 border-black rounded"
@@ -157,9 +159,9 @@ function App() {
             }}
           >
             <thead>
-              {table.getHeaderGroups().map(headerGroup => (
+              {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <th
                       {...{
                         key: header.id,
@@ -173,7 +175,7 @@ function App() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                       <div
                         {...{
@@ -207,9 +209,9 @@ function App() {
               ))}
             </thead>
             <tbody>
-              {table.getRowModel().rows.map(row => (
+              {table.getRowModel().rows.map((row) => (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <td
                       {...{
                         key: cell.id,
@@ -220,7 +222,7 @@ function App() {
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   ))}
@@ -241,14 +243,14 @@ function App() {
             }}
           >
             <div className="thead">
-              {table.getHeaderGroups().map(headerGroup => (
+              {table.getHeaderGroups().map((headerGroup) => (
                 <div
                   {...{
                     key: headerGroup.id,
                     className: 'tr',
                   }}
                 >
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <div
                       {...{
                         key: header.id,
@@ -262,7 +264,7 @@ function App() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                       <div
                         {...{
@@ -300,14 +302,14 @@ function App() {
                 className: 'tbody',
               }}
             >
-              {table.getRowModel().rows.map(row => (
+              {table.getRowModel().rows.map((row) => (
                 <div
                   {...{
                     key: row.id,
                     className: 'tr',
                   }}
                 >
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <div
                       {...{
                         key: cell.id,
@@ -319,7 +321,7 @@ function App() {
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </div>
                   ))}
@@ -340,7 +342,7 @@ function App() {
             }}
           >
             <div className="thead">
-              {table.getHeaderGroups().map(headerGroup => (
+              {table.getHeaderGroups().map((headerGroup) => (
                 <div
                   {...{
                     key: headerGroup.id,
@@ -350,7 +352,7 @@ function App() {
                     },
                   }}
                 >
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <div
                       {...{
                         key: header.id,
@@ -366,7 +368,7 @@ function App() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                       <div
                         {...{
@@ -404,7 +406,7 @@ function App() {
                 className: 'tbody',
               }}
             >
-              {table.getRowModel().rows.map(row => (
+              {table.getRowModel().rows.map((row) => (
                 <div
                   {...{
                     key: row.id,
@@ -414,7 +416,7 @@ function App() {
                     },
                   }}
                 >
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <div
                       {...{
                         key: cell.id,
@@ -428,7 +430,7 @@ function App() {
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </div>
                   ))}
@@ -449,7 +451,7 @@ function App() {
             columnSizingInfo: table.getState().columnSizingInfo,
           },
           null,
-          2
+          2,
         )}
       </pre>
     </div>
@@ -462,5 +464,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/column-visibility/src/main.tsx b/examples/react/column-visibility/src/main.tsx
index cf35b07f05..b19db69c55 100644
--- a/examples/react/column-visibility/src/main.tsx
+++ b/examples/react/column-visibility/src/main.tsx
@@ -49,30 +49,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -80,17 +80,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -135,7 +135,7 @@ function App() {
             Toggle All
           </label>
         </div>
-        {table.getAllLeafColumns().map(column => {
+        {table.getAllLeafColumns().map((column) => {
           return (
             <div key={column.id} className="px-1">
               <label>
@@ -155,15 +155,15 @@ function App() {
       <div className="h-4" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -171,9 +171,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -182,15 +182,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -214,5 +214,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx
index 71f98371b8..8e2d066d8c 100644
--- a/examples/react/editable-data/src/main.tsx
+++ b/examples/react/editable-data/src/main.tsx
@@ -44,7 +44,7 @@ const defaultColumn: Partial<ColumnDef<Person>> = {
     return (
       <input
         value={value as string}
-        onChange={e => setValue(e.target.value)}
+        onChange={(e) => setValue(e.target.value)}
         onBlur={onBlur}
       />
     )
@@ -74,28 +74,28 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -103,24 +103,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(1000))
@@ -141,7 +141,7 @@ function App() {
       updateData: (rowIndex, columnId, value) => {
         // Skip page index reset until after next rerender
         skipAutoResetPageIndex()
-        setData(old =>
+        setData((old) =>
           old.map((row, index) => {
             if (index === rowIndex) {
               return {
@@ -150,7 +150,7 @@ function App() {
               }
             }
             return row
-          })
+          }),
         )
       },
     },
@@ -162,16 +162,16 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {header.column.getCanFilter() ? (
                           <div>
@@ -187,15 +187,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -247,7 +247,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -256,11 +256,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -295,7 +295,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[0] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             e.target.value,
             old?.[1],
@@ -307,7 +307,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[1] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             old?.[0],
             e.target.value,
@@ -321,7 +321,7 @@ function Filter({
     <input
       type="text"
       value={(columnFilterValue ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
     />
@@ -334,5 +334,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/expanding/src/main.tsx b/examples/react/expanding/src/main.tsx
index feb85c7362..ae72bd1bfa 100644
--- a/examples/react/expanding/src/main.tsx
+++ b/examples/react/expanding/src/main.tsx
@@ -24,7 +24,7 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
@@ -81,25 +81,25 @@ function App() {
                 </>
               </div>
             ),
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -107,24 +107,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100, 5, 3))
@@ -139,7 +139,7 @@ function App() {
       expanded,
     },
     onExpandedChange: setExpanded,
-    getSubRows: row => row.subRows,
+    getSubRows: (row) => row.subRows,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -152,16 +152,16 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {header.column.getCanFilter() ? (
                           <div>
@@ -177,15 +177,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -237,7 +237,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -246,11 +246,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -290,7 +290,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[0] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             e.target.value,
             old?.[1],
@@ -302,7 +302,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[1] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             old?.[0],
             e.target.value,
@@ -316,7 +316,7 @@ function Filter({
     <input
       type="text"
       value={(columnFilterValue ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
     />
@@ -352,5 +352,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/filters/src/main.tsx b/examples/react/filters/src/main.tsx
index c39d964481..7c0c807812 100644
--- a/examples/react/filters/src/main.tsx
+++ b/examples/react/filters/src/main.tsx
@@ -60,7 +60,7 @@ const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
   if (rowA.columnFiltersMeta[columnId]) {
     dir = compareItems(
       rowA.columnFiltersMeta[columnId]?.itemRank!,
-      rowB.columnFiltersMeta[columnId]?.itemRank!
+      rowB.columnFiltersMeta[columnId]?.itemRank!,
     )
   }
 
@@ -72,7 +72,7 @@ function App() {
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   )
   const [globalFilter, setGlobalFilter] = React.useState('')
 
@@ -80,26 +80,26 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => `${row.firstName} ${row.lastName}`,
+            accessorFn: (row) => `${row.firstName} ${row.lastName}`,
             id: 'fullName',
             header: 'Full Name',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
             filterFn: 'fuzzy',
             sortingFn: fuzzySort,
           },
@@ -107,12 +107,12 @@ function App() {
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -120,28 +120,28 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState<Person[]>(() => makeData(50000))
-  const refreshData = () => setData(old => makeData(50000))
+  const refreshData = () => setData((old) => makeData(50000))
 
   const table = useReactTable({
     data,
@@ -181,7 +181,7 @@ function App() {
       <div>
         <DebouncedInput
           value={globalFilter ?? ''}
-          onChange={value => setGlobalFilter(String(value))}
+          onChange={(value) => setGlobalFilter(String(value))}
           className="p-2 font-lg shadow border border-block"
           placeholder="Search all columns..."
         />
@@ -189,9 +189,9 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
@@ -206,7 +206,7 @@ function App() {
                         >
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                           {{
                             asc: ' 🔼',
@@ -227,15 +227,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -287,7 +287,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -296,11 +296,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -337,7 +337,7 @@ function Filter({
       typeof firstValue === 'number'
         ? []
         : Array.from(column.getFacetedUniqueValues().keys()).sort(),
-    [column.getFacetedUniqueValues()]
+    [column.getFacetedUniqueValues()],
   )
 
   return typeof firstValue === 'number' ? (
@@ -348,7 +348,7 @@ function Filter({
           min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
           max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
           value={(columnFilterValue as [number, number])?.[0] ?? ''}
-          onChange={value =>
+          onChange={(value) =>
             column.setFilterValue((old: [number, number]) => [value, old?.[1]])
           }
           placeholder={`Min ${
@@ -363,7 +363,7 @@ function Filter({
           min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
           max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
           value={(columnFilterValue as [number, number])?.[1] ?? ''}
-          onChange={value =>
+          onChange={(value) =>
             column.setFilterValue((old: [number, number]) => [old?.[0], value])
           }
           placeholder={`Max ${
@@ -386,7 +386,7 @@ function Filter({
       <DebouncedInput
         type="text"
         value={(columnFilterValue ?? '') as string}
-        onChange={value => column.setFilterValue(value)}
+        onChange={(value) => column.setFilterValue(value)}
         placeholder={`Search... (${column.getFacetedUniqueValues().size})`}
         className="w-36 border shadow rounded"
         list={column.id + 'list'}
@@ -422,7 +422,11 @@ function DebouncedInput({
   }, [value])
 
   return (
-    <input {...props} value={value} onChange={e => setValue(e.target.value)} />
+    <input
+      {...props}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
   )
 }
 
@@ -432,5 +436,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/full-width-resizable-table/src/main.tsx b/examples/react/full-width-resizable-table/src/main.tsx
index 7ac6e8dd6f..2084ba1c29 100644
--- a/examples/react/full-width-resizable-table/src/main.tsx
+++ b/examples/react/full-width-resizable-table/src/main.tsx
@@ -13,30 +13,30 @@ import { makeData, Person } from './makeData'
 const columns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -44,17 +44,17 @@ const columns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -81,9 +81,9 @@ function App() {
       <div className="h-2" />
       <table className="w-full ">
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th
                     key={header.id}
@@ -94,7 +94,7 @@ function App() {
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                     {header.column.getCanResize() && (
                       <div
@@ -112,15 +112,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id} style={{ width: cell.column.getSize() }}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -141,5 +141,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx
index 7d3bbb225e..fa3622695f 100644
--- a/examples/react/full-width-table/src/main.tsx
+++ b/examples/react/full-width-table/src/main.tsx
@@ -19,50 +19,50 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -92,16 +92,16 @@ function App() {
         <div className="h-2" />
         <table className="w-full ">
           <thead>
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
+                {headerGroup.headers.map((header) => {
                   return (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <div>
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                         </div>
                       )}
@@ -112,15 +112,15 @@ function App() {
             ))}
           </thead>
           <tbody>
-            {table.getRowModel().rows.map(row => {
+            {table.getRowModel().rows.map((row) => {
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -172,7 +172,7 @@ function App() {
             <input
               type="number"
               defaultValue={table.getState().pagination.pageIndex + 1}
-              onChange={e => {
+              onChange={(e) => {
                 const page = e.target.value ? Number(e.target.value) - 1 : 0
                 table.setPageIndex(page)
               }}
@@ -181,11 +181,11 @@ function App() {
           </span>
           <select
             value={table.getState().pagination.pageSize}
-            onChange={e => {
+            onChange={(e) => {
               table.setPageSize(Number(e.target.value))
             }}
           >
-            {[10, 20, 30, 40, 50].map(pageSize => (
+            {[10, 20, 30, 40, 50].map((pageSize) => (
               <option key={pageSize} value={pageSize}>
                 Show {pageSize}
               </option>
@@ -213,5 +213,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx
index eb929844d9..b4f01cf7f3 100644
--- a/examples/react/fully-controlled/src/main.tsx
+++ b/examples/react/fully-controlled/src/main.tsx
@@ -24,30 +24,30 @@ type Person = {
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -55,17 +55,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -93,7 +93,7 @@ function App() {
   const [state, setState] = React.useState(table.initialState)
 
   // Override the state managers for the table to your own
-  table.setOptions(prev => ({
+  table.setOptions((prev) => ({
     ...prev,
     state,
     onStateChange: setState,
@@ -110,15 +110,15 @@ function App() {
     <div className="p-2">
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -126,9 +126,9 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
+              {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
@@ -137,15 +137,15 @@ function App() {
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -195,7 +195,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -204,11 +204,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -229,5 +229,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx
index dea75f2aff..1e20a75490 100644
--- a/examples/react/grouping/src/main.tsx
+++ b/examples/react/grouping/src/main.tsx
@@ -27,18 +27,18 @@ function App() {
           {
             accessorKey: 'firstName',
             header: 'First Name',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             /**
              * override the value used for row grouping
              * (otherwise, defaults to the value derived from accessorKey / accessorFn)
              */
-            getGroupingValue: row => `${row.firstName} ${row.lastName}`,
+            getGroupingValue: (row) => `${row.firstName} ${row.lastName}`,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
             header: () => <span>Last Name</span>,
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
           },
         ],
       },
@@ -79,7 +79,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -107,9 +107,9 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
@@ -131,7 +131,7 @@ function App() {
                         ) : null}{' '}
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </div>
                     )}
@@ -142,10 +142,10 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td
                       {...{
@@ -177,7 +177,7 @@ function App() {
                             {row.getIsExpanded() ? '👇' : '👉'}{' '}
                             {flexRender(
                               cell.column.columnDef.cell,
-                              cell.getContext()
+                              cell.getContext(),
                             )}{' '}
                             ({row.subRows.length})
                           </button>
@@ -188,13 +188,13 @@ function App() {
                         flexRender(
                           cell.column.columnDef.aggregatedCell ??
                             cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )
                       ) : cell.getIsPlaceholder() ? null : ( // For cells with repeated values, render null
                         // Otherwise, just render the regular cell
                         flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )
                       )}
                     </td>
@@ -247,7 +247,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -256,11 +256,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -285,5 +285,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/kitchen-sink/src/App.tsx b/examples/react/kitchen-sink/src/App.tsx
index d97988b521..02ad690df4 100644
--- a/examples/react/kitchen-sink/src/App.tsx
+++ b/examples/react/kitchen-sink/src/App.tsx
@@ -81,7 +81,7 @@ export const App = () => {
   const [rowSelection, setRowSelection] = React.useState({})
   const [columnPinning, setColumnPinning] = React.useState({})
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   )
   const [globalFilter, setGlobalFilter] = React.useState('')
 
@@ -134,7 +134,7 @@ export const App = () => {
 
   const randomizeColumns = () => {
     table.setColumnOrder(
-      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
@@ -145,7 +145,7 @@ export const App = () => {
           Search:
           <DebouncedInput
             value={globalFilter ?? ''}
-            onChange={value => setGlobalFilter(String(value))}
+            onChange={(value) => setGlobalFilter(String(value))}
             className="mx-1 p-2 font-lg shadow border border-block"
             placeholder="Search all columns..."
           />
@@ -162,7 +162,7 @@ export const App = () => {
               Toggle All
             </label>
           </div>
-          {table.getAllLeafColumns().map(column => {
+          {table.getAllLeafColumns().map((column) => {
             return (
               <div key={column.id} className="px-1">
                 <label>
@@ -183,7 +183,7 @@ export const App = () => {
             <input
               type="checkbox"
               checked={isSplit}
-              onChange={e => setIsSplit(e.target.checked)}
+              onChange={(e) => setIsSplit(e.target.checked)}
               className="mx-1"
             />
             Split Mode
diff --git a/examples/react/kitchen-sink/src/components/ActionButtons.tsx b/examples/react/kitchen-sink/src/components/ActionButtons.tsx
index 7a9f54d753..d902716ea3 100644
--- a/examples/react/kitchen-sink/src/components/ActionButtons.tsx
+++ b/examples/react/kitchen-sink/src/components/ActionButtons.tsx
@@ -76,7 +76,7 @@ export function ActionButtons<T extends RowData>({
           <input
             type="number"
             defaultValue={pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               setPageIndex(page)
             }}
@@ -86,11 +86,11 @@ export function ActionButtons<T extends RowData>({
         <select
           className="border p-1 rounded"
           value={pageSize}
-          onChange={e => {
+          onChange={(e) => {
             setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -123,7 +123,7 @@ export function ActionButtons<T extends RowData>({
             onClick={() =>
               console.info(
                 'table.getSelectedFlatRows()',
-                getSelectedRowModel().flatRows
+                getSelectedRowModel().flatRows,
               )
             }
           >
diff --git a/examples/react/kitchen-sink/src/components/CustomTable.tsx b/examples/react/kitchen-sink/src/components/CustomTable.tsx
index e5f68207cf..85c10e787f 100644
--- a/examples/react/kitchen-sink/src/components/CustomTable.tsx
+++ b/examples/react/kitchen-sink/src/components/CustomTable.tsx
@@ -13,7 +13,7 @@ type TableGroup = 'center' | 'left' | 'right'
 
 function getTableHeaderGroups<T extends RowData>(
   table: Table<T>,
-  tg?: TableGroup
+  tg?: TableGroup,
 ): [HeaderGroup<T>[], HeaderGroup<T>[]] {
   if (tg === 'left') {
     return [table.getLeftHeaderGroups(), table.getLeftFooterGroups()]
@@ -51,9 +51,9 @@ export function CustomTable<T extends RowData>({
   return (
     <table>
       <thead>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <tr key={headerGroup.id}>
-            {headerGroup.headers.map(header => (
+            {headerGroup.headers.map((header) => (
               <th
                 className="relative"
                 key={header.id}
@@ -80,7 +80,7 @@ export function CustomTable<T extends RowData>({
                       ) : null}{' '}
                       {flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}{' '}
                       <button
                         onClick={header.column.getToggleSortingHandler()}
@@ -120,9 +120,9 @@ export function CustomTable<T extends RowData>({
         ))}
       </thead>
       <tbody>
-        {table.getRowModel().rows.map(row => (
+        {table.getRowModel().rows.map((row) => (
           <tr key={row.id}>
-            {getRowGroup(row, tableGroup).map(cell => (
+            {getRowGroup(row, tableGroup).map((cell) => (
               <td
                 key={cell.id}
                 style={{
@@ -136,15 +136,15 @@ export function CustomTable<T extends RowData>({
         ))}
       </tbody>
       <tfoot>
-        {footerGroup.map(footerGroup => (
+        {footerGroup.map((footerGroup) => (
           <tr key={footerGroup.id}>
-            {footerGroup.headers.map(header => (
+            {footerGroup.headers.map((header) => (
               <th key={header.id} colSpan={header.colSpan}>
                 {header.isPlaceholder
                   ? null
                   : flexRender(
                       header.column.columnDef.footer,
-                      header.getContext()
+                      header.getContext(),
                     )}
               </th>
             ))}
diff --git a/examples/react/kitchen-sink/src/components/Filter.tsx b/examples/react/kitchen-sink/src/components/Filter.tsx
index 83d11ec89b..f877eb2b61 100644
--- a/examples/react/kitchen-sink/src/components/Filter.tsx
+++ b/examples/react/kitchen-sink/src/components/Filter.tsx
@@ -27,7 +27,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
           min={min}
           max={max}
           value={columnFilterValue?.[0] ?? ''}
-          onChange={value =>
+          onChange={(value) =>
             setFilterValue((old: [number, number]) => [value, old?.[1]])
           }
           placeholder={`Min ${minOpt ? `(${min})` : ''}`}
@@ -38,7 +38,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
           min={min}
           max={max}
           value={columnFilterValue?.[1] ?? ''}
-          onChange={value =>
+          onChange={(value) =>
             setFilterValue((old: [number, number]) => [old?.[0], value])
           }
           placeholder={`Max ${maxOpt ? `(${max})` : ''}`}
@@ -77,7 +77,7 @@ const TextInput: React.FC<TextInputProps> = ({
       <DebouncedInput
         type="text"
         value={columnFilterValue ?? ''}
-        onChange={value => setFilterValue(value)}
+        onChange={(value) => setFilterValue(value)}
         placeholder={`Search... (${columnSize})`}
         className="w-36 border shadow rounded"
         list={dataListId}
@@ -105,7 +105,7 @@ export function Filter<T extends RowData>({ column, table }: Props<T>) {
       typeof firstValue === 'number'
         ? []
         : Array.from(uniqueValues.keys()).sort(),
-    [uniqueValues]
+    [uniqueValues],
   )
 
   return typeof firstValue === 'number' ? (
diff --git a/examples/react/kitchen-sink/src/hooks.tsx b/examples/react/kitchen-sink/src/hooks.tsx
index f41940baef..3ac4bb5406 100644
--- a/examples/react/kitchen-sink/src/hooks.tsx
+++ b/examples/react/kitchen-sink/src/hooks.tsx
@@ -15,7 +15,7 @@ export function useSkipper() {
 
   const result = React.useMemo(
     () => [Boolean(shouldSkip), skip] as const,
-    [shouldSkip, skip]
+    [shouldSkip, skip],
   )
 
   return result
diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx
index 12107de5b7..a4837c6396 100644
--- a/examples/react/kitchen-sink/src/main.tsx
+++ b/examples/react/kitchen-sink/src/main.tsx
@@ -10,5 +10,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/kitchen-sink/src/tableModels.tsx b/examples/react/kitchen-sink/src/tableModels.tsx
index 242c543c4b..b6b6c24dda 100644
--- a/examples/react/kitchen-sink/src/tableModels.tsx
+++ b/examples/react/kitchen-sink/src/tableModels.tsx
@@ -17,7 +17,7 @@ export const fuzzyFilter: FilterFn<Person> = (
   row,
   columnId,
   value,
-  addMeta
+  addMeta,
 ) => {
   // Rank the item
   const itemRank = rankItem(row.getValue(columnId), value)
@@ -36,7 +36,7 @@ export const fuzzySort: SortingFn<Person> = (rowA, rowB, columnId) => {
   if (rowA.columnFiltersMeta[columnId]) {
     dir = compareItems(
       rowA.columnFiltersMeta[columnId]! as RankingInfo,
-      rowB.columnFiltersMeta[columnId]! as RankingInfo
+      rowB.columnFiltersMeta[columnId]! as RankingInfo,
     )
   }
 
@@ -68,7 +68,7 @@ export const defaultColumn: Partial<ColumnDef<Person>> = {
     return (
       <input
         value={value as string}
-        onChange={e => setValue(e.target.value)}
+        onChange={(e) => setValue(e.target.value)}
         onBlur={onBlur}
       />
     )
@@ -97,26 +97,26 @@ export const columns: ColumnDef<Person>[] = [
   },
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => `${row.firstName} ${row.lastName}`,
+        accessorFn: (row) => `${row.firstName} ${row.lastName}`,
         id: 'fullName',
         header: 'Full Name',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
         filterFn: fuzzyFilter,
         sortingFn: fuzzySort,
       },
@@ -124,12 +124,12 @@ export const columns: ColumnDef<Person>[] = [
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -137,17 +137,17 @@ export const columns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -157,13 +157,13 @@ export const columns: ColumnDef<Person>[] = [
 
 export const getTableMeta = (
   setData: React.Dispatch<React.SetStateAction<Person[]>>,
-  skipAutoResetPageIndex: () => void
+  skipAutoResetPageIndex: () => void,
 ) =>
   ({
     updateData: (rowIndex, columnId, value) => {
       // Skip age index reset until after next rerender
       skipAutoResetPageIndex()
-      setData(old =>
+      setData((old) =>
         old.map((row, index) => {
           if (index !== rowIndex) return row
 
@@ -171,7 +171,7 @@ export const getTableMeta = (
             ...old[rowIndex]!,
             [columnId]: value,
           }
-        })
+        }),
       )
     },
   }) as TableMeta
diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx
index 9222ad4812..fb80f337de 100644
--- a/examples/react/material-ui-pagination/src/main.tsx
+++ b/examples/react/material-ui-pagination/src/main.tsx
@@ -34,30 +34,30 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -65,24 +65,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -127,16 +127,16 @@ function LocalTable({
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
+                {headerGroup.headers.map((header) => {
                   return (
                     <TableCell key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <div>
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                           {header.column.getCanFilter() ? (
                             <div>
@@ -152,15 +152,15 @@ function LocalTable({
             ))}
           </TableHead>
           <TableBody>
-            {table.getRowModel().rows.map(row => {
+            {table.getRowModel().rows.map((row) => {
               return (
                 <TableRow key={row.id}>
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <TableCell key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </TableCell>
                     )
@@ -184,7 +184,7 @@ function LocalTable({
         onPageChange={(_, page) => {
           table.setPageIndex(page)
         }}
-        onRowsPerPageChange={e => {
+        onRowsPerPageChange={(e) => {
           const size = e.target.value ? Number(e.target.value) : 10
           table.setPageSize(size)
         }}
@@ -212,7 +212,7 @@ function Filter({
       <InputBase
         type="number"
         value={(columnFilterValue as [number, number])?.[0] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             e.target.value,
             old?.[1],
@@ -224,7 +224,7 @@ function Filter({
       <InputBase
         type="number"
         value={(columnFilterValue as [number, number])?.[1] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             old?.[0],
             e.target.value,
@@ -238,7 +238,7 @@ function Filter({
   ) : (
     <InputBase
       value={(columnFilterValue ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
       inputProps={{ 'aria-label': 'search' }}
@@ -252,5 +252,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/pagination-controlled/src/fetchData.ts b/examples/react/pagination-controlled/src/fetchData.ts
index 405ad1c310..379965ecdb 100644
--- a/examples/react/pagination-controlled/src/fetchData.ts
+++ b/examples/react/pagination-controlled/src/fetchData.ts
@@ -54,12 +54,12 @@ export async function fetchData(options: {
   pageSize: number
 }) {
   // Simulate some network latency
-  await new Promise(r => setTimeout(r, 500))
+  await new Promise((r) => setTimeout(r, 500))
 
   return {
     rows: data.slice(
       options.pageIndex * options.pageSize,
-      (options.pageIndex + 1) * options.pageSize
+      (options.pageIndex + 1) * options.pageSize,
     ),
     pageCount: Math.ceil(data.length / options.pageSize),
   }
diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx
index 7c8017b72f..1c683b7ad7 100644
--- a/examples/react/pagination-controlled/src/main.tsx
+++ b/examples/react/pagination-controlled/src/main.tsx
@@ -26,30 +26,30 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -57,24 +57,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [{ pageIndex, pageSize }, setPagination] =
@@ -91,7 +91,7 @@ function App() {
   const dataQuery = useQuery(
     ['data', fetchDataOptions],
     () => fetchData(fetchDataOptions),
-    { keepPreviousData: true }
+    { keepPreviousData: true },
   )
 
   const defaultData = React.useMemo(() => [], [])
@@ -101,7 +101,7 @@ function App() {
       pageIndex,
       pageSize,
     }),
-    [pageIndex, pageSize]
+    [pageIndex, pageSize],
   )
 
   const table = useReactTable({
@@ -123,16 +123,16 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </div>
                     )}
@@ -143,15 +143,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -203,7 +203,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -212,11 +212,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -241,5 +241,5 @@ ReactDOM.createRoot(rootElement).render(
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx
index f33292da2c..69ffca7e8e 100644
--- a/examples/react/pagination/src/main.tsx
+++ b/examples/react/pagination/src/main.tsx
@@ -25,30 +25,30 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -56,24 +56,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -121,16 +121,16 @@ function Table({
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {header.column.getCanFilter() ? (
                           <div>
@@ -146,15 +146,15 @@ function Table({
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -206,7 +206,7 @@ function Table({
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -215,11 +215,11 @@ function Table({
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -249,7 +249,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[0] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             e.target.value,
             old?.[1],
@@ -261,7 +261,7 @@ function Filter({
       <input
         type="number"
         value={(columnFilterValue as [number, number])?.[1] ?? ''}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: [number, number]) => [
             old?.[0],
             e.target.value,
@@ -275,7 +275,7 @@ function Filter({
     <input
       type="text"
       value={(columnFilterValue ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
     />
@@ -288,5 +288,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx
index 9a7be35740..be8c59ec71 100644
--- a/examples/react/row-dnd/src/main.tsx
+++ b/examples/react/row-dnd/src/main.tsx
@@ -18,30 +18,30 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -49,17 +49,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -77,7 +77,7 @@ const DraggableRow: FC<{
   })
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
     item: () => row,
@@ -92,7 +92,7 @@ const DraggableRow: FC<{
       <td ref={dropRef}>
         <button ref={dragRef}>🟰</button>
       </td>
-      {row.getVisibleCells().map(cell => (
+      {row.getVisibleCells().map((cell) => (
         <td key={cell.id}>
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </td>
@@ -116,7 +116,7 @@ function App() {
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
-    getRowId: row => row.userId, //good to have guaranteed unique row ids/keys for rendering
+    getRowId: (row) => row.userId, //good to have guaranteed unique row ids/keys for rendering
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,
@@ -133,16 +133,16 @@ function App() {
       <div className="h-4" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               <th />
-              {headerGroup.headers.map(header => (
+              {headerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -150,20 +150,20 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => (
+          {table.getRowModel().rows.map((row) => (
             <DraggableRow key={row.id} row={row} reorderRow={reorderRow} />
           ))}
         </tbody>
         <tfoot>
-          {table.getFooterGroups().map(footerGroup => (
+          {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
-              {footerGroup.headers.map(header => (
+              {footerGroup.headers.map((header) => (
                 <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
                         header.column.columnDef.footer,
-                        header.getContext()
+                        header.getContext(),
                       )}
                 </th>
               ))}
@@ -183,6 +183,6 @@ ReactDOM.createRoot(rootElement).render(
   // <React.StrictMode> //disabled for react-dnd preview bug for now
   <DndProvider backend={HTML5Backend}>
     <App />
-  </DndProvider>
+  </DndProvider>,
   // </React.StrictMode>
 )
diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx
index 8f44edf2ae..3d9f6f115d 100644
--- a/examples/react/row-pinning/src/main.tsx
+++ b/examples/react/row-pinning/src/main.tsx
@@ -108,12 +108,12 @@ function App() {
             </>
           </div>
         ),
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
       },
       {
@@ -136,7 +136,7 @@ function App() {
         size: 80,
       },
     ],
-    [includeLeafRows, includeParentRows]
+    [includeLeafRows, includeParentRows],
   )
 
   const [data, setData] = React.useState(() => makeData(1000, 2, 2))
@@ -152,7 +152,7 @@ function App() {
     },
     onExpandedChange: setExpanded,
     onRowPinningChange: setRowPinning,
-    getSubRows: row => row.subRows,
+    getSubRows: (row) => row.subRows,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
@@ -167,16 +167,16 @@ function App() {
         <div className="h-2" />
         <table>
           <thead>
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
+                {headerGroup.headers.map((header) => {
                   return (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <>
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                           {header.column.getCanFilter() ? (
                             <div>
@@ -192,21 +192,21 @@ function App() {
             ))}
           </thead>
           <tbody>
-            {table.getTopRows().map(row => (
+            {table.getTopRows().map((row) => (
               <PinnedRow key={row.id} row={row} table={table} />
             ))}
             {(copyPinnedRows
               ? table.getRowModel().rows
               : table.getCenterRows()
-            ).map(row => {
+            ).map((row) => {
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -214,7 +214,7 @@ function App() {
                 </tr>
               )
             })}
-            {table.getBottomRows().map(row => (
+            {table.getBottomRows().map((row) => (
               <PinnedRow key={row.id} row={row} table={table} />
             ))}
           </tbody>
@@ -263,7 +263,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -272,11 +272,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -360,7 +360,7 @@ function PinnedRow({ row, table }: { row: Row<any>; table: Table<any> }) {
             : undefined,
       }}
     >
-      {row.getVisibleCells().map(cell => {
+      {row.getVisibleCells().map((cell) => {
         return (
           <td key={cell.id}>
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -387,7 +387,7 @@ function Filter({
       <input
         type="number"
         value={((column.getFilterValue() as any)?.[0] ?? '') as string}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: any) => [e.target.value, old?.[1]])
         }
         placeholder={`Min`}
@@ -396,7 +396,7 @@ function Filter({
       <input
         type="number"
         value={((column.getFilterValue() as any)?.[1] ?? '') as string}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: any) => [old?.[0], e.target.value])
         }
         placeholder={`Max`}
@@ -407,7 +407,7 @@ function Filter({
     <input
       type="text"
       value={(column.getFilterValue() ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
     />
@@ -420,5 +420,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx
index 05a22ca29e..81d08258a8 100644
--- a/examples/react/row-selection/src/main.tsx
+++ b/examples/react/row-selection/src/main.tsx
@@ -50,30 +50,30 @@ function App() {
       },
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -81,24 +81,24 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -124,7 +124,7 @@ function App() {
       <div>
         <input
           value={globalFilter ?? ''}
-          onChange={e => setGlobalFilter(e.target.value)}
+          onChange={(e) => setGlobalFilter(e.target.value)}
           className="p-2 font-lg shadow border border-block"
           placeholder="Search all columns..."
         />
@@ -132,16 +132,16 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {header.column.getCanFilter() ? (
                           <div>
@@ -157,15 +157,15 @@ function App() {
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <tr key={row.id}>
-                {row.getVisibleCells().map(cell => {
+                {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )
@@ -231,7 +231,7 @@ function App() {
           <input
             type="number"
             defaultValue={table.getState().pagination.pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
             }}
@@ -240,11 +240,11 @@ function App() {
         </span>
         <select
           value={table.getState().pagination.pageSize}
-          onChange={e => {
+          onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -277,7 +277,7 @@ function App() {
           onClick={() =>
             console.info(
               'table.getSelectedRowModel().flatRows',
-              table.getSelectedRowModel().flatRows
+              table.getSelectedRowModel().flatRows,
             )
           }
         >
@@ -308,7 +308,7 @@ function Filter({
       <input
         type="number"
         value={((column.getFilterValue() as any)?.[0] ?? '') as string}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: any) => [e.target.value, old?.[1]])
         }
         placeholder={`Min`}
@@ -317,7 +317,7 @@ function Filter({
       <input
         type="number"
         value={((column.getFilterValue() as any)?.[1] ?? '') as string}
-        onChange={e =>
+        onChange={(e) =>
           column.setFilterValue((old: any) => [old?.[0], e.target.value])
         }
         placeholder={`Max`}
@@ -328,7 +328,7 @@ function Filter({
     <input
       type="text"
       value={(column.getFilterValue() ?? '') as string}
-      onChange={e => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={`Search...`}
       className="w-36 border shadow rounded"
     />
@@ -364,5 +364,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx
index c8c48ae6b8..379946870a 100644
--- a/examples/react/sorting/src/main.tsx
+++ b/examples/react/sorting/src/main.tsx
@@ -22,30 +22,30 @@ function App() {
     () => [
       {
         header: 'Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'firstName',
-            cell: info => info.getValue(),
-            footer: props => props.column.id,
+            cell: (info) => info.getValue(),
+            footer: (props) => props.column.id,
           },
           {
-            accessorFn: row => row.lastName,
+            accessorFn: (row) => row.lastName,
             id: 'lastName',
-            cell: info => info.getValue(),
+            cell: (info) => info.getValue(),
             header: () => <span>Last Name</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
       {
         header: 'Info',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
         columns: [
           {
             accessorKey: 'age',
             header: () => 'Age',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             header: 'More Info',
@@ -53,17 +53,17 @@ function App() {
               {
                 accessorKey: 'visits',
                 header: () => <span>Visits</span>,
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'status',
                 header: 'Status',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
               {
                 accessorKey: 'progress',
                 header: 'Profile Progress',
-                footer: props => props.column.id,
+                footer: (props) => props.column.id,
               },
             ],
           },
@@ -74,7 +74,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   const [data, setData] = React.useState(() => makeData(100000))
@@ -97,9 +97,9 @@ function App() {
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
@@ -113,7 +113,7 @@ function App() {
                       >
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {{
                           asc: ' 🔼',
@@ -131,15 +131,15 @@ function App() {
           {table
             .getRowModel()
             .rows.slice(0, 10)
-            .map(row => {
+            .map((row) => {
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -168,5 +168,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/sub-components/src/main.tsx b/examples/react/sub-components/src/main.tsx
index 4890d12c5d..db9242ca9c 100644
--- a/examples/react/sub-components/src/main.tsx
+++ b/examples/react/sub-components/src/main.tsx
@@ -16,7 +16,7 @@ import { makeData, Person } from './makeData'
 const columns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         id: 'expander',
@@ -52,25 +52,25 @@ const columns: ColumnDef<Person>[] = [
             {getValue<string>()}
           </div>
         ),
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -78,17 +78,17 @@ const columns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -122,16 +122,16 @@ function Table({
       <div className="h-2" />
       <table>
         <thead>
-          {table.getHeaderGroups().map(headerGroup => (
+          {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
+              {headerGroup.headers.map((header) => {
                 return (
                   <th key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </div>
                     )}
@@ -142,17 +142,17 @@ function Table({
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map(row => {
+          {table.getRowModel().rows.map((row) => {
             return (
               <Fragment key={row.id}>
                 <tr>
                   {/* first row is a normal row */}
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -204,5 +204,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx
index ca04988c68..b8a7ff6cad 100644
--- a/examples/react/virtualized-columns/src/main.tsx
+++ b/examples/react/virtualized-columns/src/main.tsx
@@ -21,7 +21,7 @@ import { makeColumns, makeData, Person } from './makeData'
 function App() {
   const columns = React.useMemo<ColumnDef<Person>[]>(
     () => makeColumns(1_000),
-    []
+    [],
   )
 
   const [data, _setData] = React.useState(() => makeData(1_000, columns))
@@ -46,7 +46,7 @@ function App() {
         .getRowModel()
         .rows[0]?.getCenterVisibleCells()
         ?.slice(0, 16)
-        ?.map(cell => cell.column.getSize()) ?? []
+        ?.map((cell) => cell.column.getSize()) ?? []
     return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length
   }, [table.getRowModel().rows])
 
@@ -68,7 +68,7 @@ function App() {
     measureElement:
       typeof window !== 'undefined' &&
       navigator.userAgent.indexOf('Firefox') === -1
-        ? element => element?.getBoundingClientRect().height
+        ? (element) => element?.getBoundingClientRect().height
         : undefined,
     overscan: 5,
   })
@@ -119,7 +119,7 @@ function App() {
               zIndex: 1,
             }}
           >
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <tr
                 key={headerGroup.id}
                 style={{ display: 'flex', width: '100%' }}
@@ -128,7 +128,7 @@ function App() {
                   //fake empty column to the left for virtualization scroll padding
                   <th style={{ display: 'flex', width: virtualPaddingLeft }} />
                 ) : null}
-                {virtualColumns.map(vc => {
+                {virtualColumns.map((vc) => {
                   const header = headerGroup.headers[vc.index]
                   return (
                     <th
@@ -148,7 +148,7 @@ function App() {
                       >
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {{
                           asc: ' 🔼',
@@ -172,14 +172,14 @@ function App() {
               position: 'relative', //needed for absolute positioning of rows
             }}
           >
-            {virtualRows.map(virtualRow => {
+            {virtualRows.map((virtualRow) => {
               const row = rows[virtualRow.index] as Row<Person>
               const visibleCells = row.getVisibleCells()
 
               return (
                 <tr
                   data-index={virtualRow.index} //needed for dynamic row height measurement
-                  ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
+                  ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
                   key={row.id}
                   style={{
                     display: 'flex',
@@ -194,7 +194,7 @@ function App() {
                       style={{ display: 'flex', width: virtualPaddingLeft }}
                     />
                   ) : null}
-                  {virtualColumns.map(vc => {
+                  {virtualColumns.map((vc) => {
                     const cell = visibleCells[vc.index]
                     return (
                       <td
@@ -206,7 +206,7 @@ function App() {
                       >
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -234,5 +234,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/virtualized-columns/src/makeData.ts b/examples/react/virtualized-columns/src/makeData.ts
index 47d8a41c46..d938534f39 100644
--- a/examples/react/virtualized-columns/src/makeData.ts
+++ b/examples/react/virtualized-columns/src/makeData.ts
@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker'
 
-export const makeColumns = num =>
+export const makeColumns = (num) =>
   [...Array(num)].map((_, i) => {
     return {
       accessorKey: i.toString(),
@@ -11,7 +11,7 @@ export const makeColumns = num =>
 export const makeData = (num, columns) =>
   [...Array(num)].map(() => ({
     ...Object.fromEntries(
-      columns.map(col => [col.accessorKey, faker.person.firstName()])
+      columns.map((col) => [col.accessorKey, faker.person.firstName()]),
     ),
   }))
 
diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx
index 3cc6c862fc..89db5bda11 100644
--- a/examples/react/virtualized-infinite-scrolling/src/main.tsx
+++ b/examples/react/virtualized-infinite-scrolling/src/main.tsx
@@ -41,12 +41,12 @@ function App() {
       },
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
       },
       {
@@ -71,10 +71,10 @@ function App() {
       {
         accessorKey: 'createdAt',
         header: 'Created At',
-        cell: info => info.getValue<Date>().toLocaleString(),
+        cell: (info) => info.getValue<Date>().toLocaleString(),
       },
     ],
-    []
+    [],
   )
 
   //react-query has an useInfiniteQuery hook just for this situation!
@@ -90,13 +90,13 @@ function App() {
         getNextPageParam: (_lastGroup, groups) => groups.length,
         keepPreviousData: true,
         refetchOnWindowFocus: false,
-      }
+      },
     )
 
   //we must flatten the array of arrays from the useInfiniteQuery hook
   const flatData = React.useMemo(
-    () => data?.pages?.flatMap(page => page.data) ?? [],
-    [data]
+    () => data?.pages?.flatMap((page) => page.data) ?? [],
+    [data],
   )
   const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0
   const totalFetched = flatData.length
@@ -116,7 +116,7 @@ function App() {
         }
       }
     },
-    [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    [fetchNextPage, isFetching, totalFetched, totalDBRowCount],
   )
 
   //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data
@@ -160,14 +160,14 @@ function App() {
       <div className="h-2" />
       <div
         className="container"
-        onScroll={e => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
+        onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
         ref={tableContainerRef}
       >
         <table>
           <thead>
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
+                {headerGroup.headers.map((header) => {
                   return (
                     <th
                       key={header.id}
@@ -185,7 +185,7 @@ function App() {
                         >
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                           {{
                             asc: ' 🔼',
@@ -205,16 +205,16 @@ function App() {
                 <td style={{ height: `${paddingTop}px` }} />
               </tr>
             )}
-            {virtualRows.map(virtualRow => {
+            {virtualRows.map((virtualRow) => {
               const row = rows[virtualRow.index] as Row<Person>
               return (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -251,5 +251,5 @@ ReactDOM.createRoot(rootElement).render(
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/react/virtualized-infinite-scrolling/src/makeData.ts b/examples/react/virtualized-infinite-scrolling/src/makeData.ts
index c1a87a1bbc..e6f6fef562 100644
--- a/examples/react/virtualized-infinite-scrolling/src/makeData.ts
+++ b/examples/react/virtualized-infinite-scrolling/src/makeData.ts
@@ -63,7 +63,7 @@ const data = makeData(1000)
 export const fetchData = (
   start: number,
   size: number,
-  sorting: SortingState
+  sorting: SortingState,
 ) => {
   const dbData = [...data]
   if (sorting.length) {
diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx
index 59a7f98594..572b5ae084 100644
--- a/examples/react/virtualized-rows/src/main.tsx
+++ b/examples/react/virtualized-rows/src/main.tsx
@@ -28,12 +28,12 @@ function App() {
       },
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
       },
       {
@@ -58,11 +58,11 @@ function App() {
       {
         accessorKey: 'createdAt',
         header: 'Created At',
-        cell: info => info.getValue<Date>().toLocaleString(),
+        cell: (info) => info.getValue<Date>().toLocaleString(),
         size: 250,
       },
     ],
-    []
+    [],
   )
 
   const [data, _setData] = React.useState(() => makeData(50_000))
@@ -88,7 +88,7 @@ function App() {
     measureElement:
       typeof window !== 'undefined' &&
       navigator.userAgent.indexOf('Firefox') === -1
-        ? element => element?.getBoundingClientRect().height
+        ? (element) => element?.getBoundingClientRect().height
         : undefined,
     overscan: 5,
   })
@@ -123,12 +123,12 @@ function App() {
               zIndex: 1,
             }}
           >
-            {table.getHeaderGroups().map(headerGroup => (
+            {table.getHeaderGroups().map((headerGroup) => (
               <tr
                 key={headerGroup.id}
                 style={{ display: 'flex', width: '100%' }}
               >
-                {headerGroup.headers.map(header => {
+                {headerGroup.headers.map((header) => {
                   return (
                     <th
                       key={header.id}
@@ -147,7 +147,7 @@ function App() {
                       >
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {{
                           asc: ' 🔼',
@@ -167,12 +167,12 @@ function App() {
               position: 'relative', //needed for absolute positioning of rows
             }}
           >
-            {rowVirtualizer.getVirtualItems().map(virtualRow => {
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
               const row = rows[virtualRow.index] as Row<Person>
               return (
                 <tr
                   data-index={virtualRow.index} //needed for dynamic row height measurement
-                  ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
+                  ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
                   key={row.id}
                   style={{
                     display: 'flex',
@@ -181,7 +181,7 @@ function App() {
                     width: '100%',
                   }}
                 >
-                  {row.getVisibleCells().map(cell => {
+                  {row.getVisibleCells().map((cell) => {
                     return (
                       <td
                         key={cell.id}
@@ -192,7 +192,7 @@ function App() {
                       >
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </td>
                     )
@@ -214,5 +214,5 @@ if (!rootElement) throw new Error('Failed to find the root element')
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/examples/solid/basic/src/App.tsx b/examples/solid/basic/src/App.tsx
index 8a988dcfc0..9d91d1ceb2 100644
--- a/examples/solid/basic/src/App.tsx
+++ b/examples/solid/basic/src/App.tsx
@@ -45,35 +45,35 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     accessorKey: 'firstName',
-    cell: info => info.getValue(),
-    footer: info => info.column.id,
+    cell: (info) => info.getValue(),
+    footer: (info) => info.column.id,
   },
   {
-    accessorFn: row => row.lastName,
+    accessorFn: (row) => row.lastName,
     id: 'lastName',
-    cell: info => <i>{info.getValue<string>()}</i>,
+    cell: (info) => <i>{info.getValue<string>()}</i>,
     header: () => <span>Last Name</span>,
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'age',
     header: () => 'Age',
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'visits',
     header: () => <span>Visits</span>,
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'status',
     header: 'Status',
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   },
   {
     accessorKey: 'progress',
     header: 'Profile Progress',
-    footer: info => info.column.id,
+    footer: (info) => info.column.id,
   },
 ]
 
@@ -94,16 +94,16 @@ function App() {
       <table>
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
@@ -114,14 +114,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
@@ -132,16 +132,16 @@ function App() {
         </tbody>
         <tfoot>
           <For each={table.getFooterGroups()}>
-            {footerGroup => (
+            {(footerGroup) => (
               <tr>
                 <For each={footerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.footer,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
diff --git a/examples/solid/bootstrap/src/App.tsx b/examples/solid/bootstrap/src/App.tsx
index 781adc6daa..9a823628c6 100644
--- a/examples/solid/bootstrap/src/App.tsx
+++ b/examples/solid/bootstrap/src/App.tsx
@@ -13,30 +13,30 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 const columns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -44,17 +44,17 @@ const columns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -79,16 +79,16 @@ function App() {
       <BTable striped bordered hover responsive size="sm">
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
@@ -99,14 +99,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
@@ -117,16 +117,16 @@ function App() {
         </tbody>
         <tfoot>
           <For each={table.getFooterGroups()}>
-            {footerGroup => (
+            {(footerGroup) => (
               <tr>
                 <For each={footerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.footer,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
diff --git a/examples/solid/column-groups/src/App.tsx b/examples/solid/column-groups/src/App.tsx
index 27e9526967..2b1c8dbd07 100644
--- a/examples/solid/column-groups/src/App.tsx
+++ b/examples/solid/column-groups/src/App.tsx
@@ -45,30 +45,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -76,17 +76,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -111,16 +111,16 @@ function App() {
       <table>
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
@@ -131,14 +131,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
@@ -149,16 +149,16 @@ function App() {
         </tbody>
         <tfoot>
           <For each={table.getFooterGroups()}>
-            {footerGroup => (
+            {(footerGroup) => (
               <tr>
                 <For each={footerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.footer,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   )}
diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx
index f09d5a9ee0..0905c98018 100644
--- a/examples/solid/column-ordering/src/App.tsx
+++ b/examples/solid/column-ordering/src/App.tsx
@@ -13,30 +13,30 @@ import {
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -44,17 +44,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -66,7 +66,7 @@ function App() {
   const [data, setData] = createSignal(makeData(20))
   const [columnOrder, setColumnOrder] = createSignal<ColumnOrderState>([])
   const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
-    {}
+    {},
   )
   const rerender = () => setData(() => makeData(20))
 
@@ -90,7 +90,7 @@ function App() {
 
   const randomizeColumns = () => {
     table.setColumnOrder(
-      faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
@@ -108,7 +108,7 @@ function App() {
           </label>
         </div>
         <For each={table.getAllLeafColumns()}>
-          {column => (
+          {(column) => (
             <div class="px-1">
               <label>
                 <input
@@ -135,15 +135,15 @@ function App() {
       <table>
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       <Show when={!header.isPlaceholder}>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </Show>
                     </th>
@@ -155,14 +155,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
@@ -173,15 +173,15 @@ function App() {
         </tbody>
         <tfoot>
           <For each={table.getFooterGroups()}>
-            {footerGroup => (
+            {(footerGroup) => (
               <tr>
                 <For each={footerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       <Show when={!header.isPlaceholder}>
                         {flexRender(
                           header.column.columnDef.footer,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </Show>
                     </th>
diff --git a/examples/solid/column-visibility/src/App.tsx b/examples/solid/column-visibility/src/App.tsx
index d972aabdd4..95ccc6db6c 100644
--- a/examples/solid/column-visibility/src/App.tsx
+++ b/examples/solid/column-visibility/src/App.tsx
@@ -46,30 +46,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -77,17 +77,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -98,7 +98,7 @@ const defaultColumns: ColumnDef<Person>[] = [
 function App() {
   const [data, setData] = createSignal(defaultData)
   const [columnVisibility, setColumnVisibility] = createSignal<VisibilityState>(
-    {}
+    {},
   )
   const rerender = () => setData(defaultData)
 
@@ -130,7 +130,7 @@ function App() {
           </label>
         </div>
         <For each={table.getAllLeafColumns()}>
-          {column => (
+          {(column) => (
             <div class="px-1">
               <label>
                 <input
@@ -148,15 +148,15 @@ function App() {
       <table>
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       <Show when={!header.isPlaceholder}>
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </Show>
                     </th>
@@ -168,14 +168,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
@@ -186,15 +186,15 @@ function App() {
         </tbody>
         <tfoot>
           <For each={table.getFooterGroups()}>
-            {footerGroup => (
+            {(footerGroup) => (
               <tr>
                 <For each={footerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       <Show when={!header.isPlaceholder}>
                         {flexRender(
                           header.column.columnDef.footer,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       </Show>
                     </th>
diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx
index 8b73cc3ad8..a7c65274e5 100644
--- a/examples/solid/sorting/src/App.tsx
+++ b/examples/solid/sorting/src/App.tsx
@@ -17,30 +17,30 @@ function App() {
   const columns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => <span>Last Name</span>,
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -48,17 +48,17 @@ function App() {
             {
               accessorKey: 'visits',
               header: () => <span>Visits</span>,
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -87,10 +87,10 @@ function App() {
       <table>
         <thead>
           <For each={table.getHeaderGroups()}>
-            {headerGroup => (
+            {(headerGroup) => (
               <tr>
                 <For each={headerGroup.headers}>
-                  {header => (
+                  {(header) => (
                     <th colSpan={header.colSpan}>
                       <Show when={!header.isPlaceholder}>
                         <div
@@ -103,7 +103,7 @@ function App() {
                         >
                           {flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                           {{
                             asc: ' 🔼',
@@ -120,14 +120,14 @@ function App() {
         </thead>
         <tbody>
           <For each={table.getRowModel().rows.slice(0, 10)}>
-            {row => (
+            {(row) => (
               <tr>
                 <For each={row.getVisibleCells()}>
-                  {cell => (
+                  {(cell) => (
                     <td>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   )}
diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte
index 6b0c5e2aec..10314fd1cb 100644
--- a/examples/svelte/basic/src/App.svelte
+++ b/examples/svelte/basic/src/App.svelte
@@ -47,35 +47,35 @@
   const defaultColumns: ColumnDef<Person>[] = [
     {
       accessorKey: 'firstName',
-      cell: info => info.getValue(),
-      footer: info => info.column.id,
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
     },
     {
-      accessorFn: row => row.lastName,
+      accessorFn: (row) => row.lastName,
       id: 'lastName',
-      cell: info => info.getValue(),
+      cell: (info) => info.getValue(),
       header: () => 'Last Name',
-      footer: info => info.column.id,
+      footer: (info) => info.column.id,
     },
     {
       accessorKey: 'age',
       header: () => 'Age',
-      footer: info => info.column.id,
+      footer: (info) => info.column.id,
     },
     {
       accessorKey: 'visits',
       header: () => 'Visits',
-      footer: info => info.column.id,
+      footer: (info) => info.column.id,
     },
     {
       accessorKey: 'status',
       header: 'Status',
-      footer: info => info.column.id,
+      footer: (info) => info.column.id,
     },
     {
       accessorKey: 'progress',
       header: 'Profile Progress',
-      footer: info => info.column.id,
+      footer: (info) => info.column.id,
     },
   ]
 
@@ -86,7 +86,7 @@
   })
 
   const rerender = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data: defaultData,
     }))
@@ -106,7 +106,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.header,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
@@ -137,7 +137,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.footer,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
diff --git a/examples/svelte/column-groups/src/App.svelte b/examples/svelte/column-groups/src/App.svelte
index 28a5850eea..c0c0eadcfb 100644
--- a/examples/svelte/column-groups/src/App.svelte
+++ b/examples/svelte/column-groups/src/App.svelte
@@ -48,30 +48,30 @@
   const defaultColumns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => 'Last Name',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -79,17 +79,17 @@
             {
               accessorKey: 'visits',
               header: () => 'Visits',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -104,7 +104,7 @@
   })
 
   const rerender = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data: defaultData,
     }))
@@ -124,7 +124,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.header,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
@@ -155,7 +155,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.footer,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
diff --git a/examples/svelte/column-ordering/src/App.svelte b/examples/svelte/column-ordering/src/App.svelte
index 53febaf3ff..c829419ae8 100644
--- a/examples/svelte/column-ordering/src/App.svelte
+++ b/examples/svelte/column-ordering/src/App.svelte
@@ -15,30 +15,30 @@
   const columns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => 'Last Name',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -46,17 +46,17 @@
             {
               accessorKey: 'visits',
               header: () => 'Visits',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -69,13 +69,13 @@
   let columnOrder = []
   let columnVisibility = {}
 
-  const setColumnOrder = updater => {
+  const setColumnOrder = (updater) => {
     if (updater instanceof Function) {
       columnOrder = updater(columnOrder)
     } else {
       columnOrder = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -84,13 +84,13 @@
     }))
   }
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility = (updater) => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {
       columnVisibility = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -114,13 +114,13 @@
   })
 
   const randomizeColumns = () => {
-    $table.setColumnOrder(_updater =>
-      faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
+    $table.setColumnOrder((_updater) =>
+      faker.helpers.shuffle($table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
   const regenerate = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data: makeData(5000),
     }))
@@ -135,7 +135,7 @@
       <label>
         <input
           checked={$table.getIsAllColumnsVisible()}
-          on:change={e => {
+          on:change={(e) => {
             console.info($table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
@@ -176,7 +176,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.header,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte
index 87d4b8f97f..064b3e7cdc 100644
--- a/examples/svelte/column-pinning/src/App.svelte
+++ b/examples/svelte/column-pinning/src/App.svelte
@@ -15,30 +15,30 @@
   const columns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => 'Last Name',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -46,17 +46,17 @@
             {
               accessorKey: 'visits',
               header: () => 'Visits',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -72,13 +72,13 @@
   let columnPinning = {}
   let columnVisibility = {}
 
-  const setColumnOrder = updater => {
+  const setColumnOrder = (updater) => {
     if (updater instanceof Function) {
       columnOrder = updater(columnOrder)
     } else {
       columnOrder = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -87,13 +87,13 @@
     }))
   }
 
-  const setColumnPinning = updater => {
+  const setColumnPinning = (updater) => {
     if (updater instanceof Function) {
       columnPinning = updater(columnPinning)
     } else {
       columnPinning = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -102,13 +102,13 @@
     }))
   }
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility = (updater) => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {
       columnVisibility = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -134,13 +134,13 @@
   })
 
   const randomizeColumns = () => {
-    $table.setColumnOrder(_updater =>
-      faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
+    $table.setColumnOrder((_updater) =>
+      faker.helpers.shuffle($table.getAllLeafColumns().map((d) => d.id)),
     )
   }
 
   const regenerate = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data: makeData(5000),
     }))
@@ -155,7 +155,7 @@
       <label>
         <input
           checked={$table.getIsAllColumnsVisible()}
-          on:change={e => {
+          on:change={(e) => {
             console.info($table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
@@ -191,7 +191,7 @@
       <input
         type="checkbox"
         checked={isSplit}
-        on:change={e => (isSplit = e.currentTarget.checked)}
+        on:change={(e) => (isSplit = e.currentTarget.checked)}
       />{' '}
       Split Mode
     </label>
@@ -209,7 +209,7 @@
                       <svelte:component
                         this={flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       />
                     {/if}
@@ -261,7 +261,7 @@
                   <svelte:component
                     this={flexRender(
                       cell.column.columnDef.cell,
-                      cell.getContext()
+                      cell.getContext(),
                     )}
                   />
                 </td>
@@ -282,7 +282,7 @@
                     <svelte:component
                       this={flexRender(
                         header.column.columnDef.header,
-                        header.getContext()
+                        header.getContext(),
                       )}
                     />
                   {/if}
@@ -334,7 +334,7 @@
                 <svelte:component
                   this={flexRender(
                     cell.column.columnDef.cell,
-                    cell.getContext()
+                    cell.getContext(),
                   )}
                 />
               </td>
@@ -355,7 +355,7 @@
                       <svelte:component
                         this={flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                       />
                     {/if}
@@ -407,7 +407,7 @@
                   <svelte:component
                     this={flexRender(
                       cell.column.columnDef.cell,
-                      cell.getContext()
+                      cell.getContext(),
                     )}
                   />
                 </td>
diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte
index e64550c668..3bb575fbf9 100644
--- a/examples/svelte/column-visibility/src/App.svelte
+++ b/examples/svelte/column-visibility/src/App.svelte
@@ -49,30 +49,30 @@
   const columns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => 'Last Name',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -80,17 +80,17 @@
             {
               accessorKey: 'visits',
               header: () => 'Visits',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -100,13 +100,13 @@
 
   let columnVisibility = {}
 
-  const setColumnVisibility = updater => {
+  const setColumnVisibility = (updater) => {
     if (updater instanceof Function) {
       columnVisibility = updater(columnVisibility)
     } else {
       columnVisibility = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -128,7 +128,7 @@
   })
 
   const rerender = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data: defaultData,
     }))
@@ -142,7 +142,7 @@
       <label>
         <input
           checked={$table.getIsAllColumnsVisible()}
-          on:change={e => {
+          on:change={(e) => {
             console.info($table.getToggleAllColumnsVisibilityHandler()(e))
           }}
           type="checkbox"
@@ -174,7 +174,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.header,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
@@ -205,7 +205,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.footer,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte
index a3094a9bfe..d84a0e3cf3 100644
--- a/examples/svelte/sorting/src/App.svelte
+++ b/examples/svelte/sorting/src/App.svelte
@@ -14,30 +14,30 @@
   const columns: ColumnDef<Person>[] = [
     {
       header: 'Name',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'firstName',
-          cell: info => info.getValue(),
-          footer: props => props.column.id,
+          cell: (info) => info.getValue(),
+          footer: (props) => props.column.id,
         },
         {
-          accessorFn: row => row.lastName,
+          accessorFn: (row) => row.lastName,
           id: 'lastName',
-          cell: info => info.getValue(),
+          cell: (info) => info.getValue(),
           header: () => 'Last Name',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
       ],
     },
     {
       header: 'Info',
-      footer: props => props.column.id,
+      footer: (props) => props.column.id,
       columns: [
         {
           accessorKey: 'age',
           header: () => 'Age',
-          footer: props => props.column.id,
+          footer: (props) => props.column.id,
         },
         {
           header: 'More Info',
@@ -45,17 +45,17 @@
             {
               accessorKey: 'visits',
               header: () => 'Visits',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'status',
               header: 'Status',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
             {
               accessorKey: 'progress',
               header: 'Profile Progress',
-              footer: props => props.column.id,
+              footer: (props) => props.column.id,
             },
           ],
         },
@@ -67,13 +67,13 @@
 
   let sorting = []
 
-  const setSorting = updater => {
+  const setSorting = (updater) => {
     if (updater instanceof Function) {
       sorting = updater(sorting)
     } else {
       sorting = updater
     }
-    options.update(old => ({
+    options.update((old) => ({
       ...old,
       state: {
         ...old.state,
@@ -96,14 +96,14 @@
 
   const refreshData = () => {
     console.info('refresh')
-    options.update(prev => ({
+    options.update((prev) => ({
       ...prev,
       data: makeData(100_000),
     }))
   }
 
   const rerender = () => {
-    options.update(options => ({
+    options.update((options) => ({
       ...options,
       data,
     }))
@@ -129,7 +129,7 @@
                   <svelte:component
                     this={flexRender(
                       header.column.columnDef.header,
-                      header.getContext()
+                      header.getContext(),
                     )}
                   />
                   {{
@@ -165,7 +165,7 @@
                 <svelte:component
                   this={flexRender(
                     header.column.columnDef.footer,
-                    header.getContext()
+                    header.getContext(),
                   )}
                 />
               {/if}
diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
index 37bec1c34c..8221da50a0 100644
--- a/examples/vue/basic/src/App.vue
+++ b/examples/vue/basic/src/App.vue
@@ -48,42 +48,42 @@ const columnHelper = createColumnHelper<Person>()
 const columns = [
   columnHelper.group({
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => 'Last Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => 'Visits',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue
index 7cd177465f..5c9f0b15c7 100644
--- a/examples/vue/column-ordering/src/App.vue
+++ b/examples/vue/column-ordering/src/App.vue
@@ -18,42 +18,42 @@ const data = ref(makeData(20))
 const columns = ref([
   columnHelper.group({
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => 'Last Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => 'Visits',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
@@ -82,7 +82,7 @@ const table = useVueTable({
     },
   },
 
-  onColumnOrderChange: order => {
+  onColumnOrderChange: (order) => {
     columnOrder.value = order
   },
   getCoreRowModel: getCoreRowModel(),
@@ -93,7 +93,7 @@ const table = useVueTable({
 
 const randomizeColumns = () => {
   table.setColumnOrder(
-    faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+    faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
   )
 }
 
@@ -105,7 +105,7 @@ function toggleColumnVisibility(column: Column<any, any>) {
 }
 
 function toggleAllColumnsVisibility() {
-  table.getAllLeafColumns().forEach(column => {
+  table.getAllLeafColumns().forEach((column) => {
     toggleColumnVisibility(column)
   })
 }
diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue
index cb2c4d8420..1041458ac3 100644
--- a/examples/vue/column-pinning/src/App.vue
+++ b/examples/vue/column-pinning/src/App.vue
@@ -23,42 +23,42 @@ const columns = ref([
   columnHelper.group({
     // id: 'Name',
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => 'Last Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => 'Visits',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
@@ -93,10 +93,10 @@ const table = useVueTable({
     },
   },
 
-  onColumnOrderChange: order => {
+  onColumnOrderChange: (order) => {
     columnOrder.value = order
   },
-  onColumnPinningChange: pinning => {
+  onColumnPinningChange: (pinning) => {
     columnPinning.value = pinning()
   },
   getCoreRowModel: getCoreRowModel(),
@@ -107,7 +107,7 @@ const table = useVueTable({
 
 const randomizeColumns = () => {
   table.setColumnOrder(
-    faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
+    faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
   )
 }
 
@@ -119,7 +119,7 @@ function toggleColumnVisibility(column: Column<any, any>) {
 }
 
 function toggleAllColumnsVisibility() {
-  table.getAllLeafColumns().forEach(column => {
+  table.getAllLeafColumns().forEach((column) => {
     toggleColumnVisibility(column)
   })
 }
diff --git a/examples/vue/pagination-controlled/src/App.vue b/examples/vue/pagination-controlled/src/App.vue
index 499e51eacc..fb7db40222 100644
--- a/examples/vue/pagination-controlled/src/App.vue
+++ b/examples/vue/pagination-controlled/src/App.vue
@@ -51,13 +51,13 @@ const table = useVueTable({
     pagination: pagination.value,
   },
   manualPagination: true,
-  onPaginationChange: updater => {
+  onPaginationChange: (updater) => {
     if (typeof updater === 'function') {
       setPagination(
         updater({
           pageIndex: pagination.value.pageIndex,
           pageSize: pagination.value.pageSize,
-        })
+        }),
       )
     } else {
       setPagination(updater)
diff --git a/examples/vue/pagination-controlled/src/useService.ts b/examples/vue/pagination-controlled/src/useService.ts
index 2fcce0b199..ef5500c618 100644
--- a/examples/vue/pagination-controlled/src/useService.ts
+++ b/examples/vue/pagination-controlled/src/useService.ts
@@ -38,7 +38,7 @@ export default function useService(pagination: Ref<PaginationState>) {
     isLoading.value = true
 
     request.value = fetch(url.value)
-      .then(async response => {
+      .then(async (response) => {
         const responseData = await response.json()
 
         if (response.ok) {
@@ -50,7 +50,7 @@ export default function useService(pagination: Ref<PaginationState>) {
           throw new Error('Network response was not OK')
         }
       })
-      .catch(error => {
+      .catch((error) => {
         error.value = error
         data.value = null
         totalResultCount.value = DEFAULT_PAGE_COUNT
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index c5b73ee4f6..35d733fe85 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -20,42 +20,42 @@ const data = ref(defaultData)
 const columns = [
   columnHelper.group({
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => 'Last Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => 'Visits',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue
index 11e6aed38c..6e88b3dfc9 100644
--- a/examples/vue/row-selection/src/App.vue
+++ b/examples/vue/row-selection/src/App.vue
@@ -40,42 +40,42 @@ const columns = [
   },
   columnHelper.group({
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => 'Last Name',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
         columns: [
           columnHelper.accessor('visits', {
             header: () => 'Visits',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
@@ -102,7 +102,7 @@ const table = useVueTable({
   },
   enableRowSelection: true, //enable row selection for all rows
   // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
-  onRowSelectionChange: updateOrValue => {
+  onRowSelectionChange: (updateOrValue) => {
     rowSelection.value =
       typeof updateOrValue === 'function'
         ? updateOrValue(rowSelection.value)
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index 0ca4cd0dfe..602739deb0 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -15,30 +15,30 @@ const columnHelper = createColumnHelper<Person>()
 const columns = [
   columnHelper.group({
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       columnHelper.accessor('firstName', {
-        cell: info => info.getValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
       }),
 
-      columnHelper.accessor(row => row.lastName, {
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        cell: info => info.getValue(),
+        cell: (info) => info.getValue(),
         header: () => h('span', 'Last Name'),
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
     ],
   }),
 
   columnHelper.group({
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
 
     columns: [
       columnHelper.accessor('age', {
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       }),
 
       columnHelper.group({
@@ -46,17 +46,17 @@ const columns = [
         columns: [
           columnHelper.accessor('visits', {
             header: () => h('span', 'Visits'),
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
 
           columnHelper.accessor('status', {
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
 
           columnHelper.accessor('progress', {
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           }),
         ],
       }),
@@ -86,7 +86,7 @@ const table = useVueTable({
       return sorting.value
     },
   },
-  onSortingChange: updaterOrValue => {
+  onSortingChange: (updaterOrValue) => {
     sorting.value =
       typeof updaterOrValue === 'function'
         ? updaterOrValue(sorting.value)
diff --git a/packages/match-sorter-utils/__tests__/match-sorter-utils.test.ts b/packages/match-sorter-utils/__tests__/match-sorter-utils.test.ts
index 951ae2fa25..9f5d827540 100644
--- a/packages/match-sorter-utils/__tests__/match-sorter-utils.test.ts
+++ b/packages/match-sorter-utils/__tests__/match-sorter-utils.test.ts
@@ -18,9 +18,9 @@ describe('match-sorter-utils', () => {
       it('CASE_SENSITIVE_EQUAL', () => {
         const ranking = rankItem(testPerson, 'John', {
           accessors: [
-            item => item.firstName,
-            item => item.lastName,
-            item => item.email,
+            (item) => item.firstName,
+            (item) => item.lastName,
+            (item) => item.email,
           ],
         })
         expect(ranking.rank).toBe(rankings.CASE_SENSITIVE_EQUAL)
@@ -33,9 +33,9 @@ describe('match-sorter-utils', () => {
       it('NO_MATCH', () => {
         const ranking = rankItem(testPerson, 'Tom', {
           accessors: [
-            item => item.firstName,
-            item => item.lastName,
-            item => item.email,
+            (item) => item.firstName,
+            (item) => item.lastName,
+            (item) => item.email,
           ],
         })
         expect(ranking.rank).toBe(rankings.NO_MATCH)
@@ -51,15 +51,15 @@ describe('match-sorter-utils', () => {
         const ranking = rankItem(testPerson, 'John', {
           accessors: [
             {
-              accessor: item => item.firstName,
+              accessor: (item) => item.firstName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.lastName,
+              accessor: (item) => item.lastName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.email,
+              accessor: (item) => item.email,
               threshold: rankings.MATCHES,
             },
           ],
@@ -76,19 +76,19 @@ describe('match-sorter-utils', () => {
           threshold: rankings.ACRONYM,
           accessors: [
             {
-              accessor: item => item.firstName,
+              accessor: (item) => item.firstName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.lastName,
+              accessor: (item) => item.lastName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => `${item.firstName} ${item.lastName}`,
+              accessor: (item) => `${item.firstName} ${item.lastName}`,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.email,
+              accessor: (item) => item.email,
               threshold: rankings.CONTAINS,
             },
           ],
@@ -104,15 +104,15 @@ describe('match-sorter-utils', () => {
         const ranking = rankItem(testPerson, 'Tom', {
           accessors: [
             {
-              accessor: item => item.firstName,
+              accessor: (item) => item.firstName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.lastName,
+              accessor: (item) => item.lastName,
               threshold: rankings.CONTAINS,
             },
             {
-              accessor: item => item.email,
+              accessor: (item) => item.email,
               threshold: rankings.MATCHES,
             },
           ],
diff --git a/packages/match-sorter-utils/rollup.config.mjs b/packages/match-sorter-utils/rollup.config.mjs
index 4daccdcf02..f2ada69d2c 100644
--- a/packages/match-sorter-utils/rollup.config.mjs
+++ b/packages/match-sorter-utils/rollup.config.mjs
@@ -11,5 +11,5 @@ export default defineConfig(
     entryFile: 'src/index.ts',
     external: [],
     globals: {},
-  })
+  }),
 )
diff --git a/packages/match-sorter-utils/src/index.ts b/packages/match-sorter-utils/src/index.ts
index 70f976063e..7b6e2e48d2 100755
--- a/packages/match-sorter-utils/src/index.ts
+++ b/packages/match-sorter-utils/src/index.ts
@@ -78,7 +78,7 @@ export type Ranking = (typeof rankings)[keyof typeof rankings]
 export function rankItem<TItem>(
   item: TItem,
   value: string,
-  options?: RankItemOptions<TItem>
+  options?: RankItemOptions<TItem>,
 ): RankingInfo {
   options = options || {}
 
@@ -148,7 +148,7 @@ export function rankItem<TItem>(
 function getMatchRanking<TItem>(
   testString: string,
   stringToRank: string,
-  options: RankItemOptions<TItem>
+  options: RankItemOptions<TItem>,
 ): Ranking {
   testString = prepareValueForComparison(testString, options)
   stringToRank = prepareValueForComparison(stringToRank, options)
@@ -211,9 +211,9 @@ function getMatchRanking<TItem>(
 function getAcronym(string: string): string {
   let acronym = ''
   const wordsInString = string.split(' ')
-  wordsInString.forEach(wordInString => {
+  wordsInString.forEach((wordInString) => {
     const splitByHyphenWords = wordInString.split('-')
-    splitByHyphenWords.forEach(splitByHyphenWord => {
+    splitByHyphenWords.forEach((splitByHyphenWord) => {
       acronym += splitByHyphenWord.substr(0, 1)
     })
   })
@@ -232,14 +232,14 @@ function getAcronym(string: string): string {
  */
 function getClosenessRanking(
   testString: string,
-  stringToRank: string
+  stringToRank: string,
 ): Ranking {
   let matchingInOrderCharCount = 0
   let charNumber = 0
   function findMatchingCharacter(
     matchChar: undefined | string,
     string: string,
-    index: number
+    index: number,
   ) {
     for (let j = index, J = string.length; j < J; j++) {
       const stringChar = string[j]
@@ -292,7 +292,7 @@ export function compareItems<TItem>(a: RankingInfo, b: RankingInfo): number {
  */
 function prepareValueForComparison<TItem>(
   value: string,
-  { keepDiacritics }: RankItemOptions<TItem>
+  { keepDiacritics }: RankItemOptions<TItem>,
 ): string {
   // value might not actually be a string at this point (we don't get to choose)
   // so part of preparing the value for comparison is ensure that it is a string
@@ -311,7 +311,7 @@ function prepareValueForComparison<TItem>(
  */
 function getItemValues<TItem>(
   item: TItem,
-  accessor: Accessor<TItem>
+  accessor: Accessor<TItem>,
 ): Array<string> {
   let accessorFn = accessor as AccessorFn<TItem>
 
@@ -341,7 +341,7 @@ function getItemValues<TItem>(
  */
 function getAllValuesToRank<TItem>(
   item: TItem,
-  accessors: ReadonlyArray<Accessor<TItem>>
+  accessors: ReadonlyArray<Accessor<TItem>>,
 ) {
   const allValues: Array<{
     itemValue: string
@@ -371,7 +371,7 @@ const defaultKeyAttributes = {
  * @return object containing the accessor's attributes
  */
 function getAccessorAttributes<TItem>(
-  accessor: Accessor<TItem>
+  accessor: Accessor<TItem>,
 ): AccessorAttributes {
   if (typeof accessor === 'function') {
     return defaultKeyAttributes
diff --git a/packages/match-sorter-utils/src/remove-accents.ts b/packages/match-sorter-utils/src/remove-accents.ts
index ca944b9eea..e3d5eb2947 100644
--- a/packages/match-sorter-utils/src/remove-accents.ts
+++ b/packages/match-sorter-utils/src/remove-accents.ts
@@ -404,7 +404,7 @@ const chars = Object.keys(characterMap).join('|')
 const allAccents = new RegExp(chars, 'g')
 
 export function removeAccents(str: string) {
-  return str.replace(allAccents, match => {
+  return str.replace(allAccents, (match) => {
     return characterMap[match]!
   })
 }
diff --git a/packages/react-table-devtools/rollup.config.mjs b/packages/react-table-devtools/rollup.config.mjs
index 9a3f9be21b..ff49c0b2fe 100644
--- a/packages/react-table-devtools/rollup.config.mjs
+++ b/packages/react-table-devtools/rollup.config.mjs
@@ -14,5 +14,5 @@ export default defineConfig(
       react: 'React',
       '@tanstack/react-table': 'ReactTable',
     },
-  })
+  }),
 )
diff --git a/packages/react-table-devtools/src/Explorer.tsx b/packages/react-table-devtools/src/Explorer.tsx
index ff0cd8a203..62b050f64f 100644
--- a/packages/react-table-devtools/src/Explorer.tsx
+++ b/packages/react-table-devtools/src/Explorer.tsx
@@ -80,7 +80,7 @@ const DefaultRenderer = ({
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
-                {subEntries.map(entry => handleEntry(entry))}
+                {subEntries.map((entry) => handleEntry(entry))}
               </SubEntries>
             ) : (
               <SubEntries>
@@ -89,10 +89,10 @@ const DefaultRenderer = ({
                     <Entry>
                       <Label
                         onClick={() =>
-                          setExpandedPages(old =>
+                          setExpandedPages((old) =>
                             old.includes(index)
-                              ? old.filter(d => d !== index)
-                              : [...old, index]
+                              ? old.filter((d) => d !== index)
+                              : [...old, index],
                           )
                         }
                       >
@@ -101,7 +101,7 @@ const DefaultRenderer = ({
                       </Label>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
-                          {entries.map(entry => handleEntry(entry))}
+                          {entries.map((entry) => handleEntry(entry))}
                         </SubEntries>
                       ) : null}
                     </Entry>
@@ -146,8 +146,8 @@ export default function Explorer({
 }) {
   const [expanded, setExpanded] = React.useState(defaultExpanded)
 
-  const toggle = set => {
-    setExpanded(old => (typeof set !== 'undefined' ? set : !old))
+  const toggle = (set) => {
+    setExpanded((old) => (typeof set !== 'undefined' ? set : !old))
   }
 
   const path = []
@@ -156,7 +156,7 @@ export default function Explorer({
   let subEntries
   const subEntryPages = []
 
-  const makeProperty = sub => {
+  const makeProperty = (sub) => {
     const newPath = path.concat(sub.label)
     const subDefaultExpanded =
       defaultExpanded === true
@@ -177,7 +177,7 @@ export default function Explorer({
       makeProperty({
         label: i,
         value: d,
-      })
+      }),
     )
   } else if (
     value !== null &&
@@ -189,7 +189,7 @@ export default function Explorer({
       makeProperty({
         label: i,
         value: val,
-      })
+      }),
     )
   } else if (typeof value === 'function') {
     type = 'function'
@@ -200,7 +200,7 @@ export default function Explorer({
       makeProperty({
         label,
         value,
-      })
+      }),
     )
   }
 
@@ -214,7 +214,7 @@ export default function Explorer({
   }
 
   return renderer({
-    handleEntry: entry => (
+    handleEntry: (entry) => (
       <Explorer key={entry.label} renderer={renderer} {...rest} {...entry} />
     ),
     type,
diff --git a/packages/react-table-devtools/src/index.tsx b/packages/react-table-devtools/src/index.tsx
index 6390689397..7db0471d01 100644
--- a/packages/react-table-devtools/src/index.tsx
+++ b/packages/react-table-devtools/src/index.tsx
@@ -82,7 +82,7 @@ export function ReactTableDevtools({
   const panelRef = React.useRef<HTMLDivElement>(null)
   const [isOpen, setIsOpen] = useLocalStorage(
     'reactTableDevtoolsOpen',
-    initialIsOpen
+    initialIsOpen,
   )
   const isMounted = useIsMounted()
 
@@ -105,7 +105,7 @@ export function ReactTableDevtools({
             type="button"
             {...otherToggleButtonProps}
             aria-label="Open React Table Devtools"
-            onClick={e => {
+            onClick={(e) => {
               setIsOpen(true)
               onToggleClick && onToggleClick(e)
             }}
diff --git a/packages/react-table-devtools/src/styledComponents.ts b/packages/react-table-devtools/src/styledComponents.ts
index c06838bded..9f87ab89ac 100644
--- a/packages/react-table-devtools/src/styledComponents.ts
+++ b/packages/react-table-devtools/src/styledComponents.ts
@@ -17,7 +17,7 @@ export const Panel = styled(
       fontSize: '.9em',
       // flexDirection: 'column',
     },
-  }
+  },
 )
 
 export const ActivePanel = styled(
@@ -33,7 +33,7 @@ export const ActivePanel = styled(
     '(max-width: 700px)': (_props, theme) => ({
       borderTop: `2px solid ${theme.gray}`,
     }),
-  }
+  },
 )
 
 export const Button = styled('button', (props, theme) => ({
@@ -102,5 +102,5 @@ export const Select = styled(
     '(max-width: 500px)': {
       display: 'none',
     },
-  }
+  },
 )
diff --git a/packages/react-table-devtools/src/useLocalStorage.ts b/packages/react-table-devtools/src/useLocalStorage.ts
index e29f662c0c..f8174818f1 100644
--- a/packages/react-table-devtools/src/useLocalStorage.ts
+++ b/packages/react-table-devtools/src/useLocalStorage.ts
@@ -14,7 +14,7 @@ const getItem = (key: string): unknown => {
 
 export default function useLocalStorage<T>(
   key: string,
-  defaultValue: T | undefined
+  defaultValue: T | undefined,
 ): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {
   const [value, setValue] = React.useState<T>()
 
@@ -23,7 +23,7 @@ export default function useLocalStorage<T>(
 
     if (typeof initialValue === 'undefined' || initialValue === null) {
       setValue(
-        typeof defaultValue === 'function' ? defaultValue() : defaultValue
+        typeof defaultValue === 'function' ? defaultValue() : defaultValue,
       )
     } else {
       setValue(initialValue)
@@ -32,7 +32,7 @@ export default function useLocalStorage<T>(
 
   const setter = React.useCallback(
     (updater: any) => {
-      setValue(old => {
+      setValue((old) => {
         let newVal = updater
 
         if (typeof updater == 'function') {
@@ -45,7 +45,7 @@ export default function useLocalStorage<T>(
         return newVal
       })
     },
-    [key]
+    [key],
   )
 
   return [value, setter]
diff --git a/packages/react-table-devtools/src/utils.ts b/packages/react-table-devtools/src/utils.ts
index eb75ca6640..c3f56ccebb 100644
--- a/packages/react-table-devtools/src/utils.ts
+++ b/packages/react-table-devtools/src/utils.ts
@@ -51,7 +51,7 @@ type Styles =
 export function styled<T extends keyof HTMLElementTagNameMap>(
   type: T,
   newStyles: Styles,
-  queries: Record<string, Styles> = {}
+  queries: Record<string, Styles> = {},
 ) {
   return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(
     ({ style, ...rest }, ref) => {
@@ -67,7 +67,7 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
               }
             : current
         },
-        {}
+        {},
       )
 
       return React.createElement(type, {
@@ -81,7 +81,7 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
         },
         ref,
       })
-    }
+    },
   )
 }
 
@@ -116,7 +116,7 @@ export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
         }
       })
     },
-    [isMounted]
+    [isMounted],
   )
 
   return [state, safeSetState]
@@ -129,9 +129,9 @@ export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
 function scheduleMicrotask(callback: () => void) {
   Promise.resolve()
     .then(callback)
-    .catch(error =>
+    .catch((error) =>
       setTimeout(() => {
         throw error
-      })
+      }),
     )
 }
diff --git a/packages/react-table/__tests__/core/core.test.tsx b/packages/react-table/__tests__/core/core.test.tsx
index 042fcb6b7b..5b8671dd12 100644
--- a/packages/react-table/__tests__/core/core.test.tsx
+++ b/packages/react-table/__tests__/core/core.test.tsx
@@ -48,30 +48,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: info => info.renderValue(),
-        footer: props => props.column.id,
+        cell: (info) => info.renderValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: info => info.renderValue(),
+        cell: (info) => info.renderValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -79,17 +79,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -123,15 +123,15 @@ describe('core', () => {
         <div className="p-2">
           <table>
             <thead>
-              {table.getHeaderGroups().map(headerGroup => (
+              {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   ))}
@@ -139,13 +139,13 @@ describe('core', () => {
               ))}
             </thead>
             <tbody>
-              {table.getRowModel().rows.map(row => (
+              {table.getRowModel().rows.map((row) => (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   ))}
@@ -153,15 +153,15 @@ describe('core', () => {
               ))}
             </tbody>
             <tfoot>
-              {table.getFooterGroups().map(footerGroup => (
+              {table.getFooterGroups().map((footerGroup) => (
                 <tr key={footerGroup.id}>
-                  {footerGroup.headers.map(header => (
+                  {footerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.footer,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   ))}
@@ -190,27 +190,27 @@ describe('core', () => {
     expect(RTL.screen.getAllByRole('cell').length).toEqual(18)
 
     expect(
-      Array.from(rendered.container.querySelectorAll('thead > tr')).map(d =>
-        Array.from(d.querySelectorAll('th')).map(d => [
+      Array.from(rendered.container.querySelectorAll('thead > tr')).map((d) =>
+        Array.from(d.querySelectorAll('th')).map((d) => [
           d.innerHTML,
           d.getAttribute('colspan'),
-        ])
-      )
+        ]),
+      ),
     ).toMatchSnapshot()
 
     expect(
-      Array.from(rendered.container.querySelectorAll('tbody > tr')).map(d =>
-        Array.from(d.querySelectorAll('td')).map(d => d.innerHTML)
-      )
+      Array.from(rendered.container.querySelectorAll('tbody > tr')).map((d) =>
+        Array.from(d.querySelectorAll('td')).map((d) => d.innerHTML),
+      ),
     ).toMatchSnapshot()
 
     expect(
-      Array.from(rendered.container.querySelectorAll('tfoot > tr')).map(d =>
-        Array.from(d.querySelectorAll('th')).map(d => [
+      Array.from(rendered.container.querySelectorAll('tfoot > tr')).map((d) =>
+        Array.from(d.querySelectorAll('th')).map((d) => [
           d.innerHTML,
           d.getAttribute('colspan'),
-        ])
-      )
+        ]),
+      ),
     ).toMatchSnapshot()
   })
 
diff --git a/packages/react-table/__tests__/features/RowSelection.test.tsx b/packages/react-table/__tests__/features/RowSelection.test.tsx
index 25be29b130..4e0e492bd2 100644
--- a/packages/react-table/__tests__/features/RowSelection.test.tsx
+++ b/packages/react-table/__tests__/features/RowSelection.test.tsx
@@ -112,15 +112,15 @@ const TableComponent: FC<{ options?: Partial<TableOptions<Person>> }> = ({
   return (
     <table>
       <thead>
-        {table.getHeaderGroups().map(headerGroup => (
+        {table.getHeaderGroups().map((headerGroup) => (
           <tr key={headerGroup.id}>
-            {headerGroup.headers.map(header => (
+            {headerGroup.headers.map((header) => (
               <th key={header.id} colSpan={header.colSpan}>
                 {header.isPlaceholder
                   ? null
                   : flexRender(
                       header.column.columnDef.header,
-                      header.getContext()
+                      header.getContext(),
                     )}
               </th>
             ))}
@@ -128,9 +128,9 @@ const TableComponent: FC<{ options?: Partial<TableOptions<Person>> }> = ({
         ))}
       </thead>
       <tbody>
-        {table.getRowModel().rows.map(row => (
+        {table.getRowModel().rows.map((row) => (
           <tr key={row.id}>
-            {row.getVisibleCells().map(cell => (
+            {row.getVisibleCells().map((cell) => (
               <td key={cell.id}>
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </td>
@@ -145,8 +145,8 @@ const TableComponent: FC<{ options?: Partial<TableOptions<Person>> }> = ({
 test(`Select all do not select rows which are not available for selection`, () => {
   render(
     <TableComponent
-      options={{ enableRowSelection: row => row.original.age > 40 }}
-    />
+      options={{ enableRowSelection: (row) => row.original.age > 40 }}
+    />,
   )
 
   const [title, notSelected, selected] = screen.getAllByRole('checkbox')
@@ -170,7 +170,7 @@ test(`Select all do not select rows which are not available for selection`, () =
 
 // issue #4757
 test(`Select all is unchecked for current page if all rows are not available for selection`, () => {
-  let condition = row => row.original.age > 50
+  let condition = (row) => row.original.age > 50
 
   const { rerender } = render(
     <TableComponent
@@ -179,7 +179,7 @@ test(`Select all is unchecked for current page if all rows are not available for
         data: defaultData,
         enableRowSelection: condition,
       }}
-    />
+    />,
   )
 
   expect(screen.queryByTestId('select-single')).not.toBeInTheDocument()
@@ -187,7 +187,7 @@ test(`Select all is unchecked for current page if all rows are not available for
   expect(selectedOnPage).not.toBeChecked()
   expect(selectedOnPage).not.toHaveAttribute('aria-checked', 'mixed')
 
-  condition = row => row.original.age > 40
+  condition = (row) => row.original.age > 40
   rerender(
     <TableComponent
       options={{
@@ -195,7 +195,7 @@ test(`Select all is unchecked for current page if all rows are not available for
         data: defaultData,
         enableRowSelection: condition,
       }}
-    />
+    />,
   )
 
   expect(screen.queryByTestId('select-single')).toBeInTheDocument()
diff --git a/packages/react-table/__tests__/features/Visibility.test.tsx b/packages/react-table/__tests__/features/Visibility.test.tsx
index e121a94988..e4f225d07e 100644
--- a/packages/react-table/__tests__/features/Visibility.test.tsx
+++ b/packages/react-table/__tests__/features/Visibility.test.tsx
@@ -49,30 +49,30 @@ const defaultData: Person[] = [
 const defaultColumns: ColumnDef<Person>[] = [
   {
     header: 'Name',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'firstName',
-        cell: props => props.renderValue(),
-        footer: props => props.column.id,
+        cell: (props) => props.renderValue(),
+        footer: (props) => props.column.id,
       },
       {
-        accessorFn: row => row.lastName,
+        accessorFn: (row) => row.lastName,
         id: 'lastName',
-        cell: props => props.renderValue(),
+        cell: (props) => props.renderValue(),
         header: () => <span>Last Name</span>,
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
     ],
   },
   {
     header: 'Info',
-    footer: props => props.column.id,
+    footer: (props) => props.column.id,
     columns: [
       {
         accessorKey: 'age',
         header: () => 'Age',
-        footer: props => props.column.id,
+        footer: (props) => props.column.id,
       },
       {
         header: 'More Info',
@@ -80,17 +80,17 @@ const defaultColumns: ColumnDef<Person>[] = [
           {
             accessorKey: 'visits',
             header: () => <span>Visits</span>,
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'status',
             header: 'Status',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
           {
             accessorKey: 'progress',
             header: 'Profile Progress',
-            footer: props => props.column.id,
+            footer: (props) => props.column.id,
           },
         ],
       },
@@ -135,7 +135,7 @@ describe('useReactTable', () => {
                 Toggle All
               </label>
             </div>
-            {table.getAllLeafColumns().map(column => {
+            {table.getAllLeafColumns().map((column) => {
               return (
                 <div key={column.id} className="px-1">
                   <label>
@@ -155,15 +155,15 @@ describe('useReactTable', () => {
           <div className="h-4" />
           <table>
             <thead>
-              {table.getHeaderGroups().map(headerGroup => (
+              {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                  {headerGroup.headers.map(header => (
+                  {headerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   ))}
@@ -171,13 +171,13 @@ describe('useReactTable', () => {
               ))}
             </thead>
             <tbody>
-              {table.getRowModel().rows.map(row => (
+              {table.getRowModel().rows.map((row) => (
                 <tr key={row.id}>
-                  {row.getVisibleCells().map(cell => (
+                  {row.getVisibleCells().map((cell) => (
                     <td key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </td>
                   ))}
@@ -185,15 +185,15 @@ describe('useReactTable', () => {
               ))}
             </tbody>
             <tfoot>
-              {table.getFooterGroups().map(footerGroup => (
+              {table.getFooterGroups().map((footerGroup) => (
                 <tr key={footerGroup.id}>
-                  {footerGroup.headers.map(header => (
+                  {footerGroup.headers.map((header) => (
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.footer,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </th>
                   ))}
@@ -220,23 +220,23 @@ describe('useReactTable', () => {
     const snap = (name: string) => {
       expect({
         headers: Array.from(
-          rendered.container.querySelectorAll('thead > tr')
-        ).map(d =>
-          Array.from(d.querySelectorAll('th')).map(d => [
+          rendered.container.querySelectorAll('thead > tr'),
+        ).map((d) =>
+          Array.from(d.querySelectorAll('th')).map((d) => [
             d.innerHTML,
             d.getAttribute('colspan'),
-          ])
+          ]),
         ),
         rows: Array.from(rendered.container.querySelectorAll('tbody > tr')).map(
-          d => Array.from(d.querySelectorAll('td')).map(d => d.innerHTML)
+          (d) => Array.from(d.querySelectorAll('td')).map((d) => d.innerHTML),
         ),
         footers: Array.from(
-          rendered.container.querySelectorAll('tfoot > tr')
-        ).map(d =>
-          Array.from(d.querySelectorAll('th')).map(d => [
+          rendered.container.querySelectorAll('tfoot > tr'),
+        ).map((d) =>
+          Array.from(d.querySelectorAll('th')).map((d) => [
             d.innerHTML,
             d.getAttribute('colspan'),
-          ])
+          ]),
         ),
       }).toMatchSnapshot(`${snapIndex++} - ${name}`)
     }
diff --git a/packages/react-table/__tests__/features/useAbsoluteLayout.notest.js b/packages/react-table/__tests__/features/useAbsoluteLayout.notest.js
index 44f6320069..2216d9f46e 100644
--- a/packages/react-table/__tests__/features/useAbsoluteLayout.notest.js
+++ b/packages/react-table/__tests__/features/useAbsoluteLayout.notest.js
@@ -45,15 +45,15 @@ function Table({ columns, data }) {
         data,
         defaultColumn,
       },
-      useAbsoluteLayout
+      useAbsoluteLayout,
     )
 
   return (
     <div {...getTableProps()} className="table">
       <div>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <div {...headerGroup.getHeaderGroupProps()} className="row">
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <div {...column.getHeaderProps()} className="cell header">
                 {column.render('Header')}
               </div>
@@ -67,7 +67,7 @@ function Table({ columns, data }) {
           (row, i) =>
             prepareRow(row) || (
               <div {...row.getRowProps()} className="row">
-                {row.cells.map(cell => {
+                {row.cells.map((cell) => {
                   return (
                     <div {...cell.getCellProps()} className="cell">
                       {cell.render('Cell')}
@@ -75,7 +75,7 @@ function Table({ columns, data }) {
                   )
                 })}
               </div>
-            )
+            ),
         )}
       </div>
     </div>
@@ -124,7 +124,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -134,11 +134,13 @@ test('renders a table', () => {
   const rtl = render(<App />)
 
   expect(
-    rtl.getAllByRole('columnheader').every(d => d.style.position === 'absolute')
+    rtl
+      .getAllByRole('columnheader')
+      .every((d) => d.style.position === 'absolute'),
   ).toBe(true)
 
   expect(
-    rtl.getAllByRole('columnheader').map(d => [d.style.left, d.style.width])
+    rtl.getAllByRole('columnheader').map((d) => [d.style.left, d.style.width]),
   ).toStrictEqual([
     ['0px', '550px'],
     ['550px', '850px'],
diff --git a/packages/react-table/__tests__/features/useBlockLayout.notest.js b/packages/react-table/__tests__/features/useBlockLayout.notest.js
index 6406d5eba8..10072b65cf 100644
--- a/packages/react-table/__tests__/features/useBlockLayout.notest.js
+++ b/packages/react-table/__tests__/features/useBlockLayout.notest.js
@@ -45,15 +45,15 @@ function Table({ columns, data }) {
         data,
         defaultColumn,
       },
-      useBlockLayout
+      useBlockLayout,
     )
 
   return (
     <div {...getTableProps()} className="table">
       <div>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <div {...headerGroup.getHeaderGroupProps()} className="row">
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <div {...column.getHeaderProps()} className="cell header">
                 {column.render('Header')}
               </div>
@@ -67,7 +67,7 @@ function Table({ columns, data }) {
           (row, i) =>
             prepareRow(row) || (
               <div {...row.getRowProps()} className="row">
-                {row.cells.map(cell => {
+                {row.cells.map((cell) => {
                   return (
                     <div {...cell.getCellProps()} className="cell">
                       {cell.render('Cell')}
@@ -75,7 +75,7 @@ function Table({ columns, data }) {
                   )
                 })}
               </div>
-            )
+            ),
         )}
       </div>
     </div>
@@ -124,7 +124,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -136,15 +136,15 @@ test('renders a table', () => {
   expect(
     rtl
       .getAllByRole('columnheader')
-      .every(d => d.style.display === 'inline-block')
+      .every((d) => d.style.display === 'inline-block'),
   ).toBe(true)
 
-  expect(rtl.getAllByRole('row').every(d => d.style.display === 'flex')).toBe(
-    true
+  expect(rtl.getAllByRole('row').every((d) => d.style.display === 'flex')).toBe(
+    true,
   )
 
   expect(
-    rtl.getAllByRole('columnheader').map(d => d.style.width)
+    rtl.getAllByRole('columnheader').map((d) => d.style.width),
   ).toStrictEqual([
     '550px',
     '850px',
diff --git a/packages/react-table/__tests__/features/useColumnOrder.notest.js b/packages/react-table/__tests__/features/useColumnOrder.notest.js
index 357fe00a6f..dd98d74a2b 100644
--- a/packages/react-table/__tests__/features/useColumnOrder.notest.js
+++ b/packages/react-table/__tests__/features/useColumnOrder.notest.js
@@ -66,15 +66,15 @@ function Table({ columns, data }) {
       columns,
       data,
     },
-    useColumnOrder
+    useColumnOrder,
   )
 
   const testColumnOrder = () => {
     setColumnOrder(
       shuffle(
-        leafColumns.map(d => d.id),
-        [1, 4, 2, 0, 3, 5]
-      )
+        leafColumns.map((d) => d.id),
+        [1, 4, 2, 0, 3, 5],
+      ),
     )
   }
 
@@ -85,7 +85,7 @@ function Table({ columns, data }) {
         <thead>
           {headerGroups.map((headerGroup, i) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>{column.render('Header')}</th>
               ))}
             </tr>
@@ -149,7 +149,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -158,7 +158,7 @@ function App() {
 test('renders a column-orderable table', () => {
   const rtl = render(<App />)
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
+  expect(rtl.getAllByRole('columnheader').map((d) => d.textContent)).toEqual([
     'Name',
     'Info',
     'First Name',
@@ -171,7 +171,7 @@ test('renders a column-orderable table', () => {
 
   fireEvent.click(rtl.getByText('Randomize Columns'))
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.textContent)).toEqual([
+  expect(rtl.getAllByRole('columnheader').map((d) => d.textContent)).toEqual([
     'Name',
     'Info',
     'Name',
diff --git a/packages/react-table/__tests__/features/useExpanded.notest.js b/packages/react-table/__tests__/features/useExpanded.notest.js
index 3719c7c94e..7dc130486f 100644
--- a/packages/react-table/__tests__/features/useExpanded.notest.js
+++ b/packages/react-table/__tests__/features/useExpanded.notest.js
@@ -19,16 +19,16 @@ function Table({ columns: userColumns, data, SubComponent }) {
       columns: userColumns,
       data,
     },
-    useExpanded
+    useExpanded,
   )
 
   return (
     <>
       <table {...getTableProps()}>
         <thead>
-          {headerGroups.map(headerGroup => (
+          {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>{column.render('Header')}</th>
               ))}
             </tr>
@@ -41,7 +41,7 @@ function Table({ columns: userColumns, data, SubComponent }) {
             return (
               <React.Fragment key={key}>
                 <tr {...rowProps}>
-                  {row.cells.map(cell => {
+                  {row.cells.map((cell) => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                     )
@@ -87,7 +87,7 @@ function App() {
         Cell: ({ row: { id } }) => `Row ${id}`,
       },
     ],
-    []
+    [],
   )
 
   return (
diff --git a/packages/react-table/__tests__/features/useFilters.notest.js b/packages/react-table/__tests__/features/useFilters.notest.js
index 7db6be59f6..776f9aebd2 100644
--- a/packages/react-table/__tests__/features/useFilters.notest.js
+++ b/packages/react-table/__tests__/features/useFilters.notest.js
@@ -44,7 +44,7 @@ const defaultColumn = {
   Filter: ({ column: { filterValue, setFilter } }) => (
     <input
       value={filterValue || ''}
-      onChange={e => {
+      onChange={(e) => {
         setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
       }}
       placeholder="Search..."
@@ -113,7 +113,7 @@ function App(props) {
       defaultColumn,
     },
     useFilters,
-    useGlobalFilter
+    useGlobalFilter,
   )
 
   const reset = () => setData(makeData())
@@ -123,9 +123,9 @@ function App(props) {
       <button onClick={reset}>Reset Data</button>
       <table {...getTableProps()}>
         <thead>
-          {headerGroups.map(headerGroup => (
+          {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>
                   {column.render('Header')}
                   {column.canFilter ? column.render('Filter') : null}
@@ -143,7 +143,7 @@ function App(props) {
               <span>
                 <input
                   value={state.globalFilter || ''}
-                  onChange={e => {
+                  onChange={(e) => {
                     setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
                   }}
                   placeholder={`Global search...`}
@@ -161,11 +161,11 @@ function App(props) {
             (row, i) =>
               prepareRow(row) || (
                 <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => (
+                  {row.cells.map((cell) => (
                     <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                   ))}
                 </tr>
-              )
+              ),
           )}
         </tbody>
       </table>
@@ -187,7 +187,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: tanner', 'firstName: jaylen'])
 
   fireEvent.change(filterInputs[1], { target: { value: 'er' } })
@@ -195,7 +195,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: derek', 'firstName: joe'])
 
   fireEvent.change(filterInputs[2], { target: { value: 'nothing' } })
@@ -203,7 +203,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([])
 
   fireEvent.change(filterInputs[1], { target: { value: '' } })
@@ -211,7 +211,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([])
 
   fireEvent.change(filterInputs[2], { target: { value: '' } })
@@ -219,7 +219,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([
     'firstName: tanner',
     'firstName: derek',
@@ -232,7 +232,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: tanner', 'firstName: joe', 'firstName: jaylen'])
 
   fireEvent.click(resetButton)
@@ -240,7 +240,7 @@ test('renders a filterable table', async () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([
     'firstName: tanner',
     'firstName: derek',
@@ -300,7 +300,7 @@ test('does not filter columns marked as disableFilters', () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: joe'])
 
   fireEvent.change(filterInputs[0], { target: { value: '' } })
@@ -308,7 +308,7 @@ test('does not filter columns marked as disableFilters', () => {
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([
     'firstName: tanner',
     'firstName: derek',
@@ -365,7 +365,7 @@ test('does not filter columns with GlobalFilter if marked disableGlobalFilter',
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual([
     'firstName: tanner',
     'firstName: derek',
@@ -379,7 +379,7 @@ test('does not filter columns with GlobalFilter if marked disableGlobalFilter',
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: joe'])
 
   // double check global filter ignore (should ignore joe bergevin)
@@ -388,6 +388,6 @@ test('does not filter columns with GlobalFilter if marked disableGlobalFilter',
     rendered
       .queryAllByRole('row')
       .slice(3)
-      .map(row => Array.from(row.children)[0].textContent)
+      .map((row) => Array.from(row.children)[0].textContent),
   ).toEqual(['firstName: tanner', 'firstName: derek', 'firstName: jaylen'])
 })
diff --git a/packages/react-table/__tests__/features/useFiltersAndRowSelect.notest.js b/packages/react-table/__tests__/features/useFiltersAndRowSelect.notest.js
index 0c33cfe314..cec6d0c247 100644
--- a/packages/react-table/__tests__/features/useFiltersAndRowSelect.notest.js
+++ b/packages/react-table/__tests__/features/useFiltersAndRowSelect.notest.js
@@ -56,7 +56,7 @@ function Table({ columns, data }) {
       defaultColumn,
     },
     useFilters,
-    useRowSelect
+    useRowSelect,
   )
 
   // Render the UI for your table
@@ -64,9 +64,9 @@ function Table({ columns, data }) {
     <>
       <table {...getTableProps()}>
         <thead>
-          {headerGroups.map(headerGroup => (
+          {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>
                   {column.render('Header')}
                   {column.canFilter ? column.render('Filter') : null}
@@ -80,13 +80,13 @@ function Table({ columns, data }) {
             (row, i) =>
               prepareRow(row) || (
                 <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => {
+                  {row.cells.map((cell) => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                     )
                   })}
                 </tr>
-              )
+              ),
           )}
         </tbody>
       </table>
@@ -108,7 +108,7 @@ const defaultColumn = {
   Filter: ({ column: { filterValue, setFilter } }) => (
     <input
       value={filterValue || ''}
-      onChange={e => {
+      onChange={(e) => {
         setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
       }}
       placeholder="Search..."
@@ -126,7 +126,7 @@ const IndeterminateCheckbox = React.forwardRef(
     }, [resolvedRef, indeterminate])
 
     return <input type="checkbox" ref={resolvedRef} {...rest} />
-  }
+  },
 )
 
 function App() {
@@ -200,7 +200,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -208,7 +208,7 @@ function App() {
 
 test('Select/Clear All while filtered only affects visible rows', () => {
   const { getAllByPlaceholderText, getByLabelText, getByTestId } = render(
-    <App />
+    <App />,
   )
   const selectedCount = getByTestId('selected-count')
   const selectAllCheckbox = getByLabelText('Select All')
diff --git a/packages/react-table/__tests__/features/useFlexLayout.notest.js b/packages/react-table/__tests__/features/useFlexLayout.notest.js
index 5465491185..49a72eda3f 100644
--- a/packages/react-table/__tests__/features/useFlexLayout.notest.js
+++ b/packages/react-table/__tests__/features/useFlexLayout.notest.js
@@ -45,15 +45,15 @@ function Table({ columns, data }) {
         data,
         defaultColumn,
       },
-      useFlexLayout
+      useFlexLayout,
     )
 
   return (
     <div {...getTableProps()} className="table">
       <div>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <div {...headerGroup.getHeaderGroupProps()} className="row">
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <div {...column.getHeaderProps()} className="cell header">
                 {column.render('Header')}
               </div>
@@ -67,7 +67,7 @@ function Table({ columns, data }) {
           (row, i) =>
             prepareRow(row) || (
               <div {...row.getRowProps()} className="row">
-                {row.cells.map(cell => {
+                {row.cells.map((cell) => {
                   return (
                     <div {...cell.getCellProps()} className="cell">
                       {cell.render('Cell')}
@@ -75,7 +75,7 @@ function Table({ columns, data }) {
                   )
                 })}
               </div>
-            )
+            ),
         )}
       </div>
     </div>
@@ -124,7 +124,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -136,11 +136,11 @@ test('renders a table', () => {
   const [headerRow, , firstRow] = rendered.queryAllByRole('row')
 
   expect(headerRow.getAttribute('style')).toEqual(
-    'display: flex; flex: 1 0 auto; min-width: 800px;'
+    'display: flex; flex: 1 0 auto; min-width: 800px;',
   )
 
   expect(
-    Array.from(firstRow.children).map(d => d.getAttribute('style'))
+    Array.from(firstRow.children).map((d) => d.getAttribute('style')),
   ).toEqual([
     'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 250px;',
     'box-sizing: border-box; flex: 0 0 auto; min-width: 100px; width: 300px;',
diff --git a/packages/react-table/__tests__/features/useGroupBy.notest.js b/packages/react-table/__tests__/features/useGroupBy.notest.js
index 68d9633c33..60c4a3acfb 100644
--- a/packages/react-table/__tests__/features/useGroupBy.notest.js
+++ b/packages/react-table/__tests__/features/useGroupBy.notest.js
@@ -52,7 +52,7 @@ const defaultColumn = {
   Filter: ({ filterValue, setFilter }) => (
     <input
       value={filterValue || ''}
-      onChange={e => {
+      onChange={(e) => {
         setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
       }}
       placeholder="Search..."
@@ -72,15 +72,15 @@ function Table({ columns, data }) {
         },
       },
       useGrouping,
-      useExpanded
+      useExpanded,
     )
 
   return (
     <table {...getTableProps()}>
       <thead>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <th {...column.getHeaderProps()}>
                 {column.canGroup ? (
                   // If the column can be grouped, let's add a toggle
@@ -99,7 +99,7 @@ function Table({ columns, data }) {
           (row, i) =>
             prepareRow(row) || (
               <tr {...row.getRowProps()}>
-                {row.cells.map(cell => {
+                {row.cells.map((cell) => {
                   return (
                     <td {...cell.getCellProps()}>
                       {cell.getIsGrouped() ? (
@@ -123,7 +123,7 @@ function Table({ columns, data }) {
                   )
                 })}
               </tr>
-            )
+            ),
         )}
       </tbody>
     </table>
@@ -137,7 +137,7 @@ function roundedMedian(leafValues) {
   let min = leafValues[0] || 0
   let max = leafValues[0] || 0
 
-  leafValues.forEach(value => {
+  leafValues.forEach((value) => {
     min = Math.min(min, value)
     max = Math.max(max, value)
   })
@@ -227,7 +227,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
diff --git a/packages/react-table/__tests__/features/usePagination.notest.js b/packages/react-table/__tests__/features/usePagination.notest.js
index c1db8071fa..ce7446488a 100644
--- a/packages/react-table/__tests__/features/usePagination.notest.js
+++ b/packages/react-table/__tests__/features/usePagination.notest.js
@@ -73,16 +73,16 @@ function Table({ columns, data }) {
       data,
       initialState: { pageIndex: 2 },
     },
-    usePagination
+    usePagination,
   )
 
   return (
     <>
       <table {...getTableProps()}>
         <thead>
-          {headerGroups.map(headerGroup => (
+          {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>{column.render('Header')}</th>
               ))}
             </tr>
@@ -93,13 +93,13 @@ function Table({ columns, data }) {
             (row, i) =>
               prepareRow(row) || (
                 <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => {
+                  {row.cells.map((cell) => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                     )
                   })}
                 </tr>
-              )
+              ),
           )}
         </tbody>
       </table>
@@ -127,7 +127,7 @@ function Table({ columns, data }) {
           <input
             type="number"
             defaultValue={pageIndex + 1}
-            onChange={e => {
+            onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               gotoPage(page)
             }}
@@ -136,12 +136,12 @@ function Table({ columns, data }) {
         </span>{' '}
         <select
           value={pageSize}
-          onChange={e => {
+          onChange={(e) => {
             setPageSize(Number(e.target.value))
           }}
           data-testid="page-size-select"
         >
-          {[10, 20, 30, 40, 50].map(pageSize => (
+          {[10, 20, 30, 40, 50].map((pageSize) => (
             <option key={pageSize} value={pageSize}>
               Show {pageSize}
             </option>
@@ -178,7 +178,8 @@ test('renders a paginated table', () => {
   })
 
   expect(
-    rendered.queryAllByRole('row').slice(2).reverse()[0].children[0].textContent
+    rendered.queryAllByRole('row').slice(2).reverse()[0].children[0]
+      .textContent,
   ).toEqual('tanner 30')
 })
 
@@ -206,7 +207,7 @@ describe('usePagination', () => {
 
     expect(
       rendered.queryAllByRole('row').slice(2).reverse()[0].children[0]
-        .textContent
+        .textContent,
     ).toEqual('tanner 30')
   })
 
@@ -218,8 +219,8 @@ describe('usePagination', () => {
           data,
         },
         useFilters,
-        usePagination
-      )
+        usePagination,
+      ),
     )
 
     act(() => result.current.nextPage())
diff --git a/packages/react-table/__tests__/features/useResizeColumns.notest.js b/packages/react-table/__tests__/features/useResizeColumns.notest.js
index 3f0e9e99c8..a3d7c96945 100644
--- a/packages/react-table/__tests__/features/useResizeColumns.notest.js
+++ b/packages/react-table/__tests__/features/useResizeColumns.notest.js
@@ -37,7 +37,7 @@ function Table({ columns, data }) {
       width: 150,
       maxWidth: 400,
     }),
-    []
+    [],
   )
 
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
@@ -48,15 +48,15 @@ function Table({ columns, data }) {
         defaultColumn,
       },
       useBlockLayout,
-      useResizeColumns
+      useResizeColumns,
     )
 
   return (
     <div {...getTableProps()} className="table">
       <div>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <div {...headerGroup.getHeaderGroupProps()} className="tr">
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <div {...column.getHeaderProps()} className="th">
                 {column.render('Header')}
                 {/* Use column.getResizerProps to hook up the events correctly */}
@@ -75,7 +75,7 @@ function Table({ columns, data }) {
           prepareRow(row)
           return (
             <div {...row.getRowProps()} className="tr">
-              {row.cells.map(cell => {
+              {row.cells.map((cell) => {
                 return (
                   <div {...cell.getCellProps()} className="td">
                     {cell.render('Cell')}
@@ -130,7 +130,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
@@ -167,18 +167,18 @@ test('table can be resized by a mouse', () => {
 
   const infoResizer = rtl
     .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
+    .find((d) => d.previousSibling.textContent === 'Info')
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesBefore,
   )
 
   fireEvent.mouseDown(infoResizer, { clientX: start })
   fireEvent.mouseMove(infoResizer, { clientX: move })
   fireEvent.mouseUp(infoResizer, { clientX: end })
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesAfter
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesAfter,
   )
 })
 
@@ -187,18 +187,18 @@ test('table can be resized by a touch device', () => {
 
   const infoResizer = rtl
     .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
+    .find((d) => d.previousSibling.textContent === 'Info')
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesBefore,
   )
 
   fireEvent.touchStart(infoResizer, { touches: [{ clientX: start }] })
   fireEvent.touchMove(infoResizer, { touches: [{ clientX: move }] })
   fireEvent.touchEnd(infoResizer, { touches: [{ clientX: end }] })
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesAfter
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesAfter,
   )
 })
 
@@ -207,10 +207,10 @@ test('table can not be resized with multiple touches', () => {
 
   const infoResizer = rtl
     .getAllByRole('separator')
-    .find(d => d.previousSibling.textContent === 'Info')
+    .find((d) => d.previousSibling.textContent === 'Info')
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesBefore,
   )
 
   fireEvent.touchStart(infoResizer, {
@@ -223,7 +223,7 @@ test('table can not be resized with multiple touches', () => {
     touches: [{ clientX: end }, { clientX: end }],
   })
 
-  expect(rtl.getAllByRole('columnheader').map(d => d.style.width)).toEqual(
-    sizesBefore
+  expect(rtl.getAllByRole('columnheader').map((d) => d.style.width)).toEqual(
+    sizesBefore,
   )
 })
diff --git a/packages/react-table/__tests__/features/useRowSelect.notest.js b/packages/react-table/__tests__/features/useRowSelect.notest.js
index ed1f5ec915..09624f6da8 100644
--- a/packages/react-table/__tests__/features/useRowSelect.notest.js
+++ b/packages/react-table/__tests__/features/useRowSelect.notest.js
@@ -77,8 +77,8 @@ function Table({ columns, data }) {
       },
       useRowSelect,
       useExpanded,
-      hooks => {
-        hooks.leafColumns.push(columns => [
+      (hooks) => {
+        hooks.leafColumns.push((columns) => [
           // Let's make a column for selection
           {
             id: 'selection',
@@ -105,7 +105,7 @@ function Table({ columns, data }) {
           },
           ...columns,
         ])
-      }
+      },
     )
 
   // Render the UI for your table
@@ -113,9 +113,9 @@ function Table({ columns, data }) {
     <>
       <table {...getTableProps()}>
         <thead>
-          {headerGroups.map(headerGroup => (
+          {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <th {...column.getHeaderProps()}>{column.render('Header')}</th>
               ))}
             </tr>
@@ -126,13 +126,13 @@ function Table({ columns, data }) {
             (row, i) =>
               prepareRow(row) || (
                 <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => {
+                  {row.cells.map((cell) => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                     )
                   })}
                 </tr>
-              )
+              ),
           )}
         </tbody>
       </table>
@@ -150,7 +150,7 @@ const IndeterminateCheckbox = React.forwardRef(
     }, [resolvedRef, indeterminate])
 
     return <input type="checkbox" ref={resolvedRef} {...rest} />
-  }
+  },
 )
 
 function App() {
@@ -201,7 +201,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
diff --git a/packages/react-table/__tests__/features/useRowState.notest.js b/packages/react-table/__tests__/features/useRowState.notest.js
index 7f7043405d..abae3fc045 100644
--- a/packages/react-table/__tests__/features/useRowState.notest.js
+++ b/packages/react-table/__tests__/features/useRowState.notest.js
@@ -43,7 +43,9 @@ const defaultColumn = {
     <div>
       Row {row.id} Cell {column.id} Count {cell.state.count}{' '}
       <button
-        onClick={() => cell.setState(old => ({ ...old, count: old.count + 1 }))}
+        onClick={() =>
+          cell.setState((old) => ({ ...old, count: old.count + 1 }))
+        }
       >
         Row {row.id} Cell {column.id} Toggle
       </button>
@@ -61,15 +63,15 @@ function Table({ columns, data }) {
         initialRowStateAccessor: () => ({ count: 0 }),
         initialCellStateAccessor: () => ({ count: 0 }),
       },
-      useRowState
+      useRowState,
     )
 
   return (
     <table {...getTableProps()}>
       <thead>
-        {headerGroups.map(headerGroup => (
+        {headerGroups.map((headerGroup) => (
           <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map(column => (
+            {headerGroup.headers.map((column) => (
               <th {...column.getHeaderProps()}>{column.render('Header')}</th>
             ))}
           </tr>
@@ -84,7 +86,7 @@ function Table({ columns, data }) {
                   <pre>Row Count {row.state.count}</pre>
                   <button
                     onClick={() =>
-                      row.setState(old => ({
+                      row.setState((old) => ({
                         ...old,
                         count: old.count + 1,
                       }))
@@ -93,11 +95,11 @@ function Table({ columns, data }) {
                     Row {row.id} Toggle
                   </button>
                 </td>
-                {row.cells.map(cell => (
+                {row.cells.map((cell) => (
                   <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                 ))}
               </tr>
-            )
+            ),
         )}
       </tbody>
     </table>
@@ -142,7 +144,7 @@ function App() {
         ],
       },
     ],
-    []
+    [],
   )
 
   return <Table columns={columns} data={data} />
diff --git a/packages/react-table/__tests__/features/withSorting.notest.tsx b/packages/react-table/__tests__/features/withSorting.notest.tsx
index 4c3ca32754..d89cd6c9e0 100644
--- a/packages/react-table/__tests__/features/withSorting.notest.tsx
+++ b/packages/react-table/__tests__/features/withSorting.notest.tsx
@@ -73,7 +73,7 @@ const columns: Column[] = [
 describe('withSorting', () => {
   it('renders a sortable table', () => {
     const { result } = renderHook(
-      options => {
+      (options) => {
         const table = useTable(options, [withCore, withSorting])
 
         return table
@@ -83,7 +83,7 @@ describe('withSorting', () => {
           data,
           columns,
         },
-      }
+      },
     )
 
     expect(getHeaderIds(result.current)).toEqual([
@@ -99,7 +99,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -114,7 +114,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -129,7 +129,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'progress')
+        .find((d) => d.id === 'progress')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -144,7 +144,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -161,7 +161,7 @@ describe('withSorting', () => {
 
   it('renders a controlled sorted table', () => {
     const { result, rerender } = renderHook(
-      options => {
+      (options) => {
         const table = useTable(options, [withSorting])
 
         return table
@@ -172,7 +172,7 @@ describe('withSorting', () => {
           columns,
           state: {},
         },
-      }
+      },
     )
 
     expect(getHeaderIds(result.current)).toEqual([
@@ -242,7 +242,7 @@ describe('withSorting', () => {
 
   it('renders a hoisted state sorted table', () => {
     const { result } = renderHook(
-      options => {
+      (options) => {
         const [sorting, setSorting] = React.useState<TableState['sorting']>([])
 
         const table = useTable(
@@ -253,7 +253,7 @@ describe('withSorting', () => {
             },
             onSortingChange: setSorting,
           },
-          [withSorting]
+          [withSorting],
         )
 
         return table
@@ -263,7 +263,7 @@ describe('withSorting', () => {
           data,
           columns,
         },
-      }
+      },
     )
 
     expect(getHeaderIds(result.current)).toEqual([
@@ -279,7 +279,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -294,7 +294,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -309,7 +309,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'progress')
+        .find((d) => d.id === 'progress')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
@@ -324,7 +324,7 @@ describe('withSorting', () => {
 
     act(() => {
       result.current.flatHeaders
-        .find(d => d.id === 'firstName')
+        .find((d) => d.id === 'firstName')
         ?.getToggleSortingProps?.()
         .onClick({
           persist: noop,
diff --git a/packages/react-table/rollup.config.mjs b/packages/react-table/rollup.config.mjs
index f811cd16bd..a2b8043811 100644
--- a/packages/react-table/rollup.config.mjs
+++ b/packages/react-table/rollup.config.mjs
@@ -13,5 +13,5 @@ export default defineConfig(
     globals: {
       react: 'React',
     },
-  })
+  }),
 )
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 614cd65b5b..d48143b72a 100755
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -17,7 +17,7 @@ export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>
  */
 export function flexRender<TProps extends object>(
   Comp: Renderable<TProps>,
-  props: TProps
+  props: TProps,
 ): React.ReactNode | JSX.Element {
   return !Comp ? null : isReactComponent<TProps>(Comp) ? (
     <Comp {...props} />
@@ -27,7 +27,7 @@ export function flexRender<TProps extends object>(
 }
 
 function isReactComponent<TProps>(
-  component: unknown
+  component: unknown,
 ): component is React.ComponentType<TProps> {
   return (
     isClassComponent(component) ||
@@ -55,7 +55,7 @@ function isExoticComponent(component: any) {
 }
 
 export function useReactTable<TData extends RowData>(
-  options: TableOptions<TData>
+  options: TableOptions<TData>,
 ) {
   // Compose in the generic options to the user options
   const resolvedOptions: TableOptionsResolved<TData> = {
@@ -75,7 +75,7 @@ export function useReactTable<TData extends RowData>(
 
   // Compose the default state above with any user state. This will allow the user
   // to only control a subset of the state if desired.
-  tableRef.current.setOptions(prev => ({
+  tableRef.current.setOptions((prev) => ({
     ...prev,
     ...options,
     state: {
@@ -84,7 +84,7 @@ export function useReactTable<TData extends RowData>(
     },
     // Similarly, we'll maintain both our internal state and any user-provided
     // state.
-    onStateChange: updater => {
+    onStateChange: (updater) => {
       setState(updater)
       options.onStateChange?.(updater)
     },
diff --git a/packages/solid-table/rollup.config.mjs b/packages/solid-table/rollup.config.mjs
index 4975cc7d9d..52944118b2 100644
--- a/packages/solid-table/rollup.config.mjs
+++ b/packages/solid-table/rollup.config.mjs
@@ -14,5 +14,5 @@ export default defineConfig(
       'solid-js': 'Solid',
       'solid-js/store': 'SolidStore',
     },
-  })
+  }),
 )
diff --git a/packages/solid-table/src/index.tsx b/packages/solid-table/src/index.tsx
index 9a07cb31bd..c0f0957eb1 100755
--- a/packages/solid-table/src/index.tsx
+++ b/packages/solid-table/src/index.tsx
@@ -21,7 +21,7 @@ export function flexRender<TProps extends {}>(Comp: any, props: TProps) {
 }
 
 export function createSolidTable<TData extends RowData>(
-  options: TableOptions<TData>
+  options: TableOptions<TData>,
 ) {
   const resolvedOptions: TableOptionsResolved<TData> = mergeProps(
     {
@@ -30,19 +30,19 @@ export function createSolidTable<TData extends RowData>(
       renderFallbackValue: null,
       mergeOptions: (
         defaultOptions: TableOptions<TData>,
-        options: Partial<TableOptions<TData>>
+        options: Partial<TableOptions<TData>>,
       ) => {
         return mergeProps(defaultOptions, options) as TableOptions<TData>
       },
     },
-    options
+    options,
   )
 
   const table = createTable<TData>(resolvedOptions)
   const [state, setState] = createStore(table.initialState)
 
   createComputed(() => {
-    table.setOptions(prev => {
+    table.setOptions((prev) => {
       return mergeProps(prev, options, {
         state: mergeProps(state, options.state || {}),
         // Similarly, we'll maintain both our internal state and any user-provided
diff --git a/packages/svelte-table/rollup.config.mjs b/packages/svelte-table/rollup.config.mjs
index eaa02049df..789dc1236c 100644
--- a/packages/svelte-table/rollup.config.mjs
+++ b/packages/svelte-table/rollup.config.mjs
@@ -20,5 +20,5 @@ export default defineConfig(
       'svelte/internal': 'SvelteInternal',
       'svelte/store': 'SvelteStore',
     },
-  })
+  }),
 )
diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts
index 0a7dd157cf..5235bb571d 100755
--- a/packages/svelte-table/src/index.ts
+++ b/packages/svelte-table/src/index.ts
@@ -69,7 +69,7 @@ export function flexRender(component: any, props: any): ComponentType | null {
 type ReadableOrVal<T> = T | Readable<T>
 
 export function createSvelteTable<TData extends RowData>(
-  options: ReadableOrVal<TableOptions<TData>>
+  options: ReadableOrVal<TableOptions<TData>>,
 ) {
   let optionsStore: Readable<TableOptions<TData>>
 
@@ -90,17 +90,17 @@ export function createSvelteTable<TData extends RowData>(
 
   let stateStore = writable(/** @type {number} */ table.initialState)
   // combine stores
-  let stateOptionsStore = derived([stateStore, optionsStore], s => s)
+  let stateOptionsStore = derived([stateStore, optionsStore], (s) => s)
   const tableReadable = readable(table, function start(set) {
     const unsubscribe = stateOptionsStore.subscribe(([state, options]) => {
-      table.setOptions(prev => {
+      table.setOptions((prev) => {
         return {
           ...prev,
           ...options,
           state: { ...state, ...options.state },
           // Similarly, we'll maintain both our internal state and any user-provided
           // state.
-          onStateChange: updater => {
+          onStateChange: (updater) => {
             if (updater instanceof Function) {
               stateStore.update(updater)
             } else {
diff --git a/packages/svelte-table/src/placeholder.ts b/packages/svelte-table/src/placeholder.ts
index b99a4c69b8..ecac0f55e1 100644
--- a/packages/svelte-table/src/placeholder.ts
+++ b/packages/svelte-table/src/placeholder.ts
@@ -7,7 +7,7 @@ type X = typeof PlaceholderClient
 const PlaceholderServer = create_ssr_component(
   ($$result: any, $$props: any, $$bindings: any, slots: any) => {
     return `${escape($$props.content)}`
-  }
+  },
 ) as any as typeof SvelteComponentDev
 
 export default typeof document === 'undefined'
diff --git a/packages/svelte-table/src/render-component.ts b/packages/svelte-table/src/render-component.ts
index 08f4fb1a65..b31336296d 100644
--- a/packages/svelte-table/src/render-component.ts
+++ b/packages/svelte-table/src/render-component.ts
@@ -49,7 +49,7 @@ function create_fragment(ctx: any, Comp: any, props: any) {
 
 function renderClient<T>(
   Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
+  props: T extends ComponentType<infer C> ? ComponentProps<C> : any,
 ) {
   return class WrapperComp extends SvelteComponent {
     constructor(options: any) {
@@ -61,7 +61,7 @@ function renderClient<T>(
         (ctx: any) => create_fragment(ctx, Comp, props),
         safe_not_equal,
         {},
-        undefined
+        undefined,
       )
     }
   } as ComponentType
@@ -69,7 +69,7 @@ function renderClient<T>(
 
 function renderServer<T>(
   Comp: T,
-  props: T extends ComponentType<infer C> ? ComponentProps<C> : any
+  props: T extends ComponentType<infer C> ? ComponentProps<C> : any,
 ) {
   const WrapperComp = create_ssr_component(
     ($$result: any, $$props: any, $$bindings: any, slots: any) => {
@@ -77,9 +77,9 @@ function renderServer<T>(
         $$result,
         props,
         {},
-        {}
+        {},
       )}`
-    }
+    },
   )
 
   return WrapperComp as unknown as ComponentType
diff --git a/packages/table-core/__tests__/Pinning.test.ts b/packages/table-core/__tests__/Pinning.test.ts
index 8912362c95..17d7b0c919 100644
--- a/packages/table-core/__tests__/Pinning.test.ts
+++ b/packages/table-core/__tests__/Pinning.test.ts
@@ -14,7 +14,7 @@ type PersonColumn = ColumnDef<Person, string | number | Person[] | undefined>
 function generateColumns(people: Person[]): PersonColumn[] {
   const columnHelper = createColumnHelper<Person>()
   const person = people[0]
-  return Object.keys(person).map(key => {
+  return Object.keys(person).map((key) => {
     const typedKey = key as personKeys
     return columnHelper.accessor(typedKey, { id: typedKey })
   })
diff --git a/packages/table-core/__tests__/RowSelection.test.ts b/packages/table-core/__tests__/RowSelection.test.ts
index f8d2fc9279..5472fcffb9 100644
--- a/packages/table-core/__tests__/RowSelection.test.ts
+++ b/packages/table-core/__tests__/RowSelection.test.ts
@@ -13,7 +13,7 @@ type PersonColumn = ColumnDef<Person, string | number | Person[] | undefined>
 function generateColumns(people: Person[]): PersonColumn[] {
   const columnHelper = createColumnHelper<Person>()
   const person = people[0]
-  return Object.keys(person).map(key => {
+  return Object.keys(person).map((key) => {
     const typedKey = key as personKeys
     return columnHelper.accessor(typedKey, { id: typedKey })
   })
@@ -30,7 +30,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0': true,
@@ -59,7 +59,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0': true,
@@ -88,7 +88,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {},
         },
@@ -166,7 +166,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual(false)
@@ -181,7 +181,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {},
         },
@@ -194,7 +194,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual(false)
@@ -209,7 +209,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0.0': true,
@@ -224,7 +224,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual('some')
@@ -239,7 +239,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0.0': true,
@@ -255,7 +255,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual('all')
@@ -265,11 +265,11 @@ describe('RowSelection', () => {
       const columns = generateColumns(data)
 
       const table = createTable<Person>({
-        enableRowSelection: row => row.index === 0, // only first row is selectable (of 2 sub-rows)
+        enableRowSelection: (row) => row.index === 0, // only first row is selectable (of 2 sub-rows)
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0.0': true, // first sub-row
@@ -284,7 +284,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual('all')
@@ -298,7 +298,7 @@ describe('RowSelection', () => {
         onStateChange() {},
         renderFallbackValue: '',
         data,
-        getSubRows: row => row.subRows,
+        getSubRows: (row) => row.subRows,
         state: {
           rowSelection: {
             '0.0.0': true, // first nested sub-row
@@ -313,7 +313,7 @@ describe('RowSelection', () => {
       const result = RowSelection.isSubRowSelected(
         firstRow,
         table.getState().rowSelection,
-        table
+        table,
       )
 
       expect(result).toEqual('some')
diff --git a/packages/table-core/__tests__/getGroupedRowModel.test.ts b/packages/table-core/__tests__/getGroupedRowModel.test.ts
index c73bfc2d10..b917838b93 100644
--- a/packages/table-core/__tests__/getGroupedRowModel.test.ts
+++ b/packages/table-core/__tests__/getGroupedRowModel.test.ts
@@ -10,7 +10,7 @@ type PersonColumn = ColumnDef<Person, string | number | Person[] | undefined>
 function generateColumns(people: Person[]): PersonColumn[] {
   const columnHelper = createColumnHelper<Person>()
   const person = people[0]
-  return Object.keys(person).map(key => {
+  return Object.keys(person).map((key) => {
     const typedKey = key as personKeys
     return columnHelper.accessor(typedKey, { id: typedKey })
   })
@@ -23,9 +23,9 @@ describe('#getGroupedRowModel', () => {
     const grouping = ['firstName', 'lastName', 'age']
     const start = new Date()
 
-    data.forEach(p => (p.firstName = 'Fixed'))
-    data.forEach(p => (p.lastName = 'Name'))
-    data.forEach(p => (p.age = 123))
+    data.forEach((p) => (p.firstName = 'Fixed'))
+    data.forEach((p) => (p.lastName = 'Name'))
+    data.forEach((p) => (p.age = 123))
 
     const table = createTable<Person>({
       onStateChange() {},
@@ -41,10 +41,10 @@ describe('#getGroupedRowModel', () => {
 
     expect(groupedById['firstName:Fixed'].leafRows.length).toEqual(50000)
     expect(
-      groupedById['firstName:Fixed>lastName:Name'].leafRows.length
+      groupedById['firstName:Fixed>lastName:Name'].leafRows.length,
     ).toEqual(50000)
     expect(
-      groupedById['firstName:Fixed>lastName:Name>age:123'].leafRows.length
+      groupedById['firstName:Fixed>lastName:Name>age:123'].leafRows.length,
     ).toEqual(50000)
     expect(end.valueOf() - start.valueOf()).toBeLessThan(3000)
   })
diff --git a/packages/table-core/rollup.config.mjs b/packages/table-core/rollup.config.mjs
index 6d31938690..a0b9e93c29 100644
--- a/packages/table-core/rollup.config.mjs
+++ b/packages/table-core/rollup.config.mjs
@@ -11,5 +11,5 @@ export default defineConfig(
     entryFile: 'src/index.ts',
     external: [],
     globals: {},
-  })
+  }),
 )
diff --git a/packages/table-core/src/aggregationFns.ts b/packages/table-core/src/aggregationFns.ts
index 0652ee0374..2269c55e69 100755
--- a/packages/table-core/src/aggregationFns.ts
+++ b/packages/table-core/src/aggregationFns.ts
@@ -13,7 +13,7 @@ const sum: AggregationFn<any> = (columnId, _leafRows, childRows) => {
 const min: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let min: number | undefined
 
-  childRows.forEach(row => {
+  childRows.forEach((row) => {
     const value = row.getValue<number>(columnId)
 
     if (
@@ -30,7 +30,7 @@ const min: AggregationFn<any> = (columnId, _leafRows, childRows) => {
 const max: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let max: number | undefined
 
-  childRows.forEach(row => {
+  childRows.forEach((row) => {
     const value = row.getValue<number>(columnId)
     if (
       value != null &&
@@ -47,7 +47,7 @@ const extent: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let min: number | undefined
   let max: number | undefined
 
-  childRows.forEach(row => {
+  childRows.forEach((row) => {
     const value = row.getValue<number>(columnId)
     if (value != null) {
       if (min === undefined) {
@@ -66,7 +66,7 @@ const mean: AggregationFn<any> = (columnId, leafRows) => {
   let count = 0
   let sum = 0
 
-  leafRows.forEach(row => {
+  leafRows.forEach((row) => {
     let value = row.getValue<number>(columnId)
     if (value != null && (value = +value) >= value) {
       ++count, (sum += value)
@@ -83,7 +83,7 @@ const median: AggregationFn<any> = (columnId, leafRows) => {
     return
   }
 
-  const values = leafRows.map(row => row.getValue(columnId))
+  const values = leafRows.map((row) => row.getValue(columnId))
   if (!isNumberArray(values)) {
     return
   }
@@ -97,11 +97,11 @@ const median: AggregationFn<any> = (columnId, leafRows) => {
 }
 
 const unique: AggregationFn<any> = (columnId, leafRows) => {
-  return Array.from(new Set(leafRows.map(d => d.getValue(columnId))).values())
+  return Array.from(new Set(leafRows.map((d) => d.getValue(columnId))).values())
 }
 
 const uniqueCount: AggregationFn<any> = (columnId, leafRows) => {
-  return new Set(leafRows.map(d => d.getValue(columnId))).size
+  return new Set(leafRows.map((d) => d.getValue(columnId))).size
 }
 
 const count: AggregationFn<any> = (_columnId, leafRows) => {
diff --git a/packages/table-core/src/columnHelper.ts b/packages/table-core/src/columnHelper.ts
index b1f006c517..7649c84a5d 100644
--- a/packages/table-core/src/columnHelper.ts
+++ b/packages/table-core/src/columnHelper.ts
@@ -61,7 +61,7 @@ export type ColumnHelper<TData extends RowData> = {
     accessor: TAccessor,
     column: TAccessor extends AccessorFn<TData>
       ? DisplayColumnDef<TData, TValue>
-      : IdentifiedColumnDef<TData, TValue>
+      : IdentifiedColumnDef<TData, TValue>,
   ) => ColumnDef<TData, TValue>
   display: (column: DisplayColumnDef<TData>) => ColumnDef<TData, unknown>
   group: (column: GroupColumnDef<TData>) => ColumnDef<TData, unknown>
@@ -82,7 +82,7 @@ export function createColumnHelper<
             accessorKey: accessor,
           }
     },
-    display: column => column as ColumnDef<TData, unknown>,
-    group: column => column as ColumnDef<TData, unknown>,
+    display: (column) => column as ColumnDef<TData, unknown>,
+    group: (column) => column as ColumnDef<TData, unknown>,
   }
 }
diff --git a/packages/table-core/src/core/cell.ts b/packages/table-core/src/core/cell.ts
index f84da80f7f..7ead652674 100644
--- a/packages/table-core/src/core/cell.ts
+++ b/packages/table-core/src/core/cell.ts
@@ -53,7 +53,7 @@ export function createCell<TData extends RowData, TValue>(
   table: Table<TData>,
   row: Row<TData>,
   column: Column<TData, TValue>,
-  columnId: string
+  columnId: string,
 ): Cell<TData, TValue> {
   const getRenderValue = () =>
     cell.getValue() ?? table.options.renderFallbackValue
@@ -77,16 +77,16 @@ export function createCell<TData extends RowData, TValue>(
       {
         key: process.env.NODE_ENV === 'development' && 'cell.getContext',
         debug: () => table.options.debugAll,
-      }
+      },
     ),
   }
 
-  table._features.forEach(feature => {
+  table._features.forEach((feature) => {
     feature.createCell?.(
       cell as Cell<TData, TValue>,
       column,
       row as Row<TData>,
-      table
+      table,
     )
   }, {})
 
diff --git a/packages/table-core/src/core/column.ts b/packages/table-core/src/core/column.ts
index fddca5afe3..6b73b15cc1 100644
--- a/packages/table-core/src/core/column.ts
+++ b/packages/table-core/src/core/column.ts
@@ -66,7 +66,7 @@ export function createColumn<TData extends RowData, TValue>(
   table: Table<TData>,
   columnDef: ColumnDef<TData, TValue>,
   depth: number,
-  parent?: Column<TData, TValue>
+  parent?: Column<TData, TValue>,
 ): Column<TData, TValue> {
   const defaultColumn = table._getDefaultColumnDef()
 
@@ -98,7 +98,7 @@ export function createColumn<TData extends RowData, TValue>(
           result = result?.[key]
           if (process.env.NODE_ENV !== 'production' && result === undefined) {
             console.warn(
-              `"${key}" in deeply nested key "${accessorKey}" returned undefined.`
+              `"${key}" in deeply nested key "${accessorKey}" returned undefined.`,
             )
           }
         }
@@ -116,7 +116,7 @@ export function createColumn<TData extends RowData, TValue>(
       throw new Error(
         resolvedColumnDef.accessorFn
           ? `Columns require an id when using an accessorFn`
-          : `Columns require an id when using a non-string header`
+          : `Columns require an id when using a non-string header`,
       )
     }
     throw new Error()
@@ -134,20 +134,20 @@ export function createColumn<TData extends RowData, TValue>(
       () => {
         return [
           column as Column<TData, TValue>,
-          ...column.columns?.flatMap(d => d.getFlatColumns()),
+          ...column.columns?.flatMap((d) => d.getFlatColumns()),
         ]
       },
       {
         key: process.env.NODE_ENV === 'production' && 'column.getFlatColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
     getLeafColumns: memo(
       () => [table._getOrderColumnsFn()],
-      orderColumns => {
+      (orderColumns) => {
         if (column.columns?.length) {
-          let leafColumns = column.columns.flatMap(column =>
-            column.getLeafColumns()
+          let leafColumns = column.columns.flatMap((column) =>
+            column.getLeafColumns(),
           )
 
           return orderColumns(leafColumns)
@@ -158,7 +158,7 @@ export function createColumn<TData extends RowData, TValue>(
       {
         key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
   }
 
diff --git a/packages/table-core/src/core/headers.ts b/packages/table-core/src/core/headers.ts
index 3c8dc12dd6..f0fb4d1821 100644
--- a/packages/table-core/src/core/headers.ts
+++ b/packages/table-core/src/core/headers.ts
@@ -211,7 +211,7 @@ function createHeader<TData extends RowData, TValue>(
     placeholderId?: string
     index: number
     depth: number
-  }
+  },
 ): Header<TData, TValue> {
   const id = options.id ?? column.id
 
@@ -247,7 +247,7 @@ function createHeader<TData extends RowData, TValue>(
     }),
   }
 
-  table._features.forEach(feature => {
+  table._features.forEach((feature) => {
     feature.createHeader?.(header, table)
   })
 
@@ -268,22 +268,22 @@ export const Headers: TableFeature = {
       (allColumns, leafColumns, left, right) => {
         const leftColumns =
           left
-            ?.map(columnId => leafColumns.find(d => d.id === columnId)!)
+            ?.map((columnId) => leafColumns.find((d) => d.id === columnId)!)
             .filter(Boolean) ?? []
 
         const rightColumns =
           right
-            ?.map(columnId => leafColumns.find(d => d.id === columnId)!)
+            ?.map((columnId) => leafColumns.find((d) => d.id === columnId)!)
             .filter(Boolean) ?? []
 
         const centerColumns = leafColumns.filter(
-          column => !left?.includes(column.id) && !right?.includes(column.id)
+          (column) => !left?.includes(column.id) && !right?.includes(column.id),
         )
 
         const headerGroups = buildHeaderGroups(
           allColumns,
           [...leftColumns, ...centerColumns, ...rightColumns],
-          table
+          table,
         )
 
         return headerGroups
@@ -291,7 +291,7 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getHeaderGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getCenterHeaderGroups = memo(
@@ -303,14 +303,14 @@ export const Headers: TableFeature = {
       ],
       (allColumns, leafColumns, left, right) => {
         leafColumns = leafColumns.filter(
-          column => !left?.includes(column.id) && !right?.includes(column.id)
+          (column) => !left?.includes(column.id) && !right?.includes(column.id),
         )
         return buildHeaderGroups(allColumns, leafColumns, table, 'center')
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getCenterHeaderGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getLeftHeaderGroups = memo(
@@ -322,7 +322,7 @@ export const Headers: TableFeature = {
       (allColumns, leafColumns, left) => {
         const orderedLeafColumns =
           left
-            ?.map(columnId => leafColumns.find(d => d.id === columnId)!)
+            ?.map((columnId) => leafColumns.find((d) => d.id === columnId)!)
             .filter(Boolean) ?? []
 
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left')
@@ -330,7 +330,7 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getLeftHeaderGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getRightHeaderGroups = memo(
@@ -342,7 +342,7 @@ export const Headers: TableFeature = {
       (allColumns, leafColumns, right) => {
         const orderedLeafColumns =
           right
-            ?.map(columnId => leafColumns.find(d => d.id === columnId)!)
+            ?.map((columnId) => leafColumns.find((d) => d.id === columnId)!)
             .filter(Boolean) ?? []
 
         return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right')
@@ -350,62 +350,62 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getRightHeaderGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     // Footer Groups
 
     table.getFooterGroups = memo(
       () => [table.getHeaderGroups()],
-      headerGroups => {
+      (headerGroups) => {
         return [...headerGroups].reverse()
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getFooterGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getLeftFooterGroups = memo(
       () => [table.getLeftHeaderGroups()],
-      headerGroups => {
+      (headerGroups) => {
         return [...headerGroups].reverse()
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getCenterFooterGroups = memo(
       () => [table.getCenterHeaderGroups()],
-      headerGroups => {
+      (headerGroups) => {
         return [...headerGroups].reverse()
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getCenterFooterGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getRightFooterGroups = memo(
       () => [table.getRightHeaderGroups()],
-      headerGroups => {
+      (headerGroups) => {
         return [...headerGroups].reverse()
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     // Flat Headers
 
     table.getFlatHeaders = memo(
       () => [table.getHeaderGroups()],
-      headerGroups => {
+      (headerGroups) => {
         return headerGroups
-          .map(headerGroup => {
+          .map((headerGroup) => {
             return headerGroup.headers
           })
           .flat()
@@ -413,14 +413,14 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getFlatHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getLeftFlatHeaders = memo(
       () => [table.getLeftHeaderGroups()],
-      left => {
+      (left) => {
         return left
-          .map(headerGroup => {
+          .map((headerGroup) => {
             return headerGroup.headers
           })
           .flat()
@@ -428,14 +428,14 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getLeftFlatHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getCenterFlatHeaders = memo(
       () => [table.getCenterHeaderGroups()],
-      left => {
+      (left) => {
         return left
-          .map(headerGroup => {
+          .map((headerGroup) => {
             return headerGroup.headers
           })
           .flat()
@@ -443,14 +443,14 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getCenterFlatHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getRightFlatHeaders = memo(
       () => [table.getRightHeaderGroups()],
-      left => {
+      (left) => {
         return left
-          .map(headerGroup => {
+          .map((headerGroup) => {
             return headerGroup.headers
           })
           .flat()
@@ -458,42 +458,42 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getRightFlatHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     // Leaf Headers
 
     table.getCenterLeafHeaders = memo(
       () => [table.getCenterFlatHeaders()],
-      flatHeaders => {
-        return flatHeaders.filter(header => !header.subHeaders?.length)
+      (flatHeaders) => {
+        return flatHeaders.filter((header) => !header.subHeaders?.length)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getCenterLeafHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getLeftLeafHeaders = memo(
       () => [table.getLeftFlatHeaders()],
-      flatHeaders => {
-        return flatHeaders.filter(header => !header.subHeaders?.length)
+      (flatHeaders) => {
+        return flatHeaders.filter((header) => !header.subHeaders?.length)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getLeftLeafHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getRightLeafHeaders = memo(
       () => [table.getRightFlatHeaders()],
-      flatHeaders => {
-        return flatHeaders.filter(header => !header.subHeaders?.length)
+      (flatHeaders) => {
+        return flatHeaders.filter((header) => !header.subHeaders?.length)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getRightLeafHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
 
     table.getLeafHeaders = memo(
@@ -508,7 +508,7 @@ export const Headers: TableFeature = {
           ...(center[0]?.headers ?? []),
           ...(right[0]?.headers ?? []),
         ]
-          .map(header => {
+          .map((header) => {
             return header.getLeafHeaders()
           })
           .flat()
@@ -516,7 +516,7 @@ export const Headers: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getLeafHeaders',
         debug: () => table.options.debugAll ?? table.options.debugHeaders,
-      }
+      },
     )
   },
 }
@@ -525,7 +525,7 @@ export function buildHeaderGroups<TData extends RowData>(
   allColumns: Column<TData, unknown>[],
   columnsToGroup: Column<TData, unknown>[],
   table: Table<TData>,
-  headerFamily?: 'center' | 'left' | 'right'
+  headerFamily?: 'center' | 'left' | 'right',
 ) {
   // Find the max depth of the columns:
   // build the leaf column row
@@ -539,8 +539,8 @@ export function buildHeaderGroups<TData extends RowData>(
     maxDepth = Math.max(maxDepth, depth)
 
     columns
-      .filter(column => column.getIsVisible())
-      .forEach(column => {
+      .filter((column) => column.getIsVisible())
+      .forEach((column) => {
         if (column.columns?.length) {
           findMaxDepth(column.columns, depth + 1)
         }
@@ -553,7 +553,7 @@ export function buildHeaderGroups<TData extends RowData>(
 
   const createHeaderGroup = (
     headersToGroup: Header<TData, unknown>[],
-    depth: number
+    depth: number,
   ) => {
     // The header group we are creating
     const headerGroup: HeaderGroup<TData> = {
@@ -566,7 +566,7 @@ export function buildHeaderGroups<TData extends RowData>(
     const pendingParentHeaders: Header<TData, unknown>[] = []
 
     // Scan each column for parents
-    headersToGroup.forEach(headerToGroup => {
+    headersToGroup.forEach((headerToGroup) => {
       // What is the latest (last) parent column?
 
       const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0]
@@ -599,7 +599,7 @@ export function buildHeaderGroups<TData extends RowData>(
             .join('_'),
           isPlaceholder,
           placeholderId: isPlaceholder
-            ? `${pendingParentHeaders.filter(d => d.column === column).length}`
+            ? `${pendingParentHeaders.filter((d) => d.column === column).length}`
             : undefined,
           depth,
           index: pendingParentHeaders.length,
@@ -627,7 +627,7 @@ export function buildHeaderGroups<TData extends RowData>(
     createHeader(table, column, {
       depth: maxDepth,
       index,
-    })
+    }),
   )
 
   createHeaderGroup(bottomHeaders, maxDepth - 1)
@@ -639,13 +639,13 @@ export function buildHeaderGroups<TData extends RowData>(
   // })
 
   const recurseHeadersForSpans = (
-    headers: Header<TData, unknown>[]
+    headers: Header<TData, unknown>[],
   ): { colSpan: number; rowSpan: number }[] => {
-    const filteredHeaders = headers.filter(header =>
-      header.column.getIsVisible()
+    const filteredHeaders = headers.filter((header) =>
+      header.column.getIsVisible(),
     )
 
-    return filteredHeaders.map(header => {
+    return filteredHeaders.map((header) => {
       let colSpan = 0
       let rowSpan = 0
       let childRowSpans = [0]
@@ -657,7 +657,7 @@ export function buildHeaderGroups<TData extends RowData>(
           ({ colSpan: childColSpan, rowSpan: childRowSpan }) => {
             colSpan += childColSpan
             childRowSpans.push(childRowSpan)
-          }
+          },
         )
       } else {
         colSpan = 1
diff --git a/packages/table-core/src/core/row.ts b/packages/table-core/src/core/row.ts
index 125315d612..14a5c7f914 100644
--- a/packages/table-core/src/core/row.ts
+++ b/packages/table-core/src/core/row.ts
@@ -99,7 +99,7 @@ export const createRow = <TData extends RowData>(
   rowIndex: number,
   depth: number,
   subRows?: Row<TData>[],
-  parentId?: string
+  parentId?: string,
 ): Row<TData> => {
   let row: CoreRow<TData> = {
     id,
@@ -109,7 +109,7 @@ export const createRow = <TData extends RowData>(
     parentId,
     _valuesCache: {},
     _uniqueValuesCache: {},
-    getValue: columnId => {
+    getValue: (columnId) => {
       if (row._valuesCache.hasOwnProperty(columnId)) {
         return row._valuesCache[columnId]
       }
@@ -122,12 +122,12 @@ export const createRow = <TData extends RowData>(
 
       row._valuesCache[columnId] = column.accessorFn(
         row.original as TData,
-        rowIndex
+        rowIndex,
       )
 
       return row._valuesCache[columnId] as any
     },
-    getUniqueValues: columnId => {
+    getUniqueValues: (columnId) => {
       if (row._uniqueValuesCache.hasOwnProperty(columnId)) {
         return row._uniqueValuesCache[columnId]
       }
@@ -145,15 +145,15 @@ export const createRow = <TData extends RowData>(
 
       row._uniqueValuesCache[columnId] = column.columnDef.getUniqueValues(
         row.original as TData,
-        rowIndex
+        rowIndex,
       )
 
       return row._uniqueValuesCache[columnId] as any
     },
-    renderValue: columnId =>
+    renderValue: (columnId) =>
       row.getValue(columnId) ?? table.options.renderFallbackValue,
     subRows: subRows ?? [],
-    getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
+    getLeafRows: () => flattenBy(row.subRows, (d) => d.subRows),
     getParentRow: () =>
       row.parentId ? table.getRow(row.parentId, true) : undefined,
     getParentRows: () => {
@@ -169,33 +169,33 @@ export const createRow = <TData extends RowData>(
     },
     getAllCells: memo(
       () => [table.getAllLeafColumns()],
-      leafColumns => {
-        return leafColumns.map(column => {
+      (leafColumns) => {
+        return leafColumns.map((column) => {
           return createCell(table, row as Row<TData>, column, column.id)
         })
       },
       {
         key: process.env.NODE_ENV === 'development' && 'row.getAllCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     ),
 
     _getAllCellsByColumnId: memo(
       () => [row.getAllCells()],
-      allCells => {
+      (allCells) => {
         return allCells.reduce(
           (acc, cell) => {
             acc[cell.column.id] = cell
             return acc
           },
-          {} as Record<string, Cell<TData, unknown>>
+          {} as Record<string, Cell<TData, unknown>>,
         )
       },
       {
         key:
           process.env.NODE_ENV === 'production' && 'row.getAllCellsByColumnId',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     ),
   }
 
diff --git a/packages/table-core/src/core/table.ts b/packages/table-core/src/core/table.ts
index 4b54218152..6155ed77da 100644
--- a/packages/table-core/src/core/table.ts
+++ b/packages/table-core/src/core/table.ts
@@ -153,7 +153,7 @@ export interface CoreOptions<TData extends RowData> {
    */
   mergeOptions?: (
     defaultOptions: TableOptions<TData>,
-    options: Partial<TableOptions<TData>>
+    options: Partial<TableOptions<TData>>,
   ) => TableOptions<TData>
   /**
    * You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta`.
@@ -271,7 +271,7 @@ export interface CoreInstance<TData extends RowData> {
 }
 
 export function createTable<TData extends RowData>(
-  options: TableOptionsResolved<TData>
+  options: TableOptionsResolved<TData>,
 ): Table<TData> {
   if (options.debugAll || options.debugTable) {
     console.info('Creating Table Instance...')
@@ -301,7 +301,7 @@ export function createTable<TData extends RowData>(
     ...(options.initialState ?? {}),
   } as TableState
 
-  table._features.forEach(feature => {
+  table._features.forEach((feature) => {
     initialState = feature.getInitialState?.(initialState) ?? initialState
   })
 
@@ -315,7 +315,7 @@ export function createTable<TData extends RowData>(
       ...options,
     },
     initialState,
-    _queue: cb => {
+    _queue: (cb) => {
       queued.push(cb)
 
       if (!queuedTimeout) {
@@ -330,17 +330,17 @@ export function createTable<TData extends RowData>(
             }
             queuedTimeout = false
           })
-          .catch(error =>
+          .catch((error) =>
             setTimeout(() => {
               throw error
-            })
+            }),
           )
       }
     },
     reset: () => {
       table.setState(table.initialState)
     },
-    setOptions: updater => {
+    setOptions: (updater) => {
       const newOptions = functionalUpdate(updater, table.options)
       table.options = mergeOptions(newOptions) as RequiredKeys<
         TableOptionsResolved<TData>,
@@ -389,13 +389,13 @@ export function createTable<TData extends RowData>(
     },
     _getDefaultColumnDef: memo(
       () => [table.options.defaultColumn],
-      defaultColumn => {
+      (defaultColumn) => {
         defaultColumn = (defaultColumn ?? {}) as Partial<
           ColumnDef<TData, unknown>
         >
 
         return {
-          header: props => {
+          header: (props) => {
             const resolvedColumnDef = props.header.column
               .columnDef as ColumnDefResolved<TData>
 
@@ -410,7 +410,7 @@ export function createTable<TData extends RowData>(
             return null
           },
           // footer: props => props.header.column.id,
-          cell: props => props.renderValue<any>()?.toString?.() ?? null,
+          cell: (props) => props.renderValue<any>()?.toString?.() ?? null,
           ...table._features.reduce((obj, feature) => {
             return Object.assign(obj, feature.getDefaultColumnDef?.())
           }, {}),
@@ -420,20 +420,20 @@ export function createTable<TData extends RowData>(
       {
         debug: () => table.options.debugAll ?? table.options.debugColumns,
         key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef',
-      }
+      },
     ),
 
     _getColumnDefs: () => table.options.columns,
 
     getAllColumns: memo(
       () => [table._getColumnDefs()],
-      columnDefs => {
+      (columnDefs) => {
         const recurseColumns = (
           columnDefs: ColumnDef<TData, unknown>[],
           parent?: Column<TData, unknown>,
-          depth = 0
+          depth = 0,
         ): Column<TData, unknown>[] => {
-          return columnDefs.map(columnDef => {
+          return columnDefs.map((columnDef) => {
             const column = createColumn(table, columnDef, depth, parent)
 
             const groupingColumnDef = columnDef as GroupColumnDef<
@@ -454,52 +454,54 @@ export function createTable<TData extends RowData>(
       {
         key: process.env.NODE_ENV === 'development' && 'getAllColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
 
     getAllFlatColumns: memo(
       () => [table.getAllColumns()],
-      allColumns => {
-        return allColumns.flatMap(column => {
+      (allColumns) => {
+        return allColumns.flatMap((column) => {
           return column.getFlatColumns()
         })
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
 
     _getAllFlatColumnsById: memo(
       () => [table.getAllFlatColumns()],
-      flatColumns => {
+      (flatColumns) => {
         return flatColumns.reduce(
           (acc, column) => {
             acc[column.id] = column
             return acc
           },
-          {} as Record<string, Column<TData, unknown>>
+          {} as Record<string, Column<TData, unknown>>,
         )
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
 
     getAllLeafColumns: memo(
       () => [table.getAllColumns(), table._getOrderColumnsFn()],
       (allColumns, orderColumns) => {
-        let leafColumns = allColumns.flatMap(column => column.getLeafColumns())
+        let leafColumns = allColumns.flatMap((column) =>
+          column.getLeafColumns(),
+        )
         return orderColumns(leafColumns)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     ),
 
-    getColumn: columnId => {
+    getColumn: (columnId) => {
       const column = table._getAllFlatColumnsById()[columnId]
 
       if (process.env.NODE_ENV !== 'production' && !column) {
diff --git a/packages/table-core/src/features/ColumnSizing.ts b/packages/table-core/src/features/ColumnSizing.ts
index 22615d8c97..6704398c8d 100644
--- a/packages/table-core/src/features/ColumnSizing.ts
+++ b/packages/table-core/src/features/ColumnSizing.ts
@@ -232,7 +232,7 @@ export const ColumnSizing: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): ColumnSizingDefaultOptions => {
     return {
       columnResizeMode: 'onEnd',
@@ -244,7 +244,7 @@ export const ColumnSizing: TableFeature = {
 
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     column.getSize = () => {
       const columnSize = table.getState().columnSizing[column.id]
@@ -252,19 +252,19 @@ export const ColumnSizing: TableFeature = {
       return Math.min(
         Math.max(
           column.columnDef.minSize ?? defaultColumnSizing.minSize,
-          columnSize ?? column.columnDef.size ?? defaultColumnSizing.size
+          columnSize ?? column.columnDef.size ?? defaultColumnSizing.size,
         ),
-        column.columnDef.maxSize ?? defaultColumnSizing.maxSize
+        column.columnDef.maxSize ?? defaultColumnSizing.maxSize,
       )
     }
-    column.getStart = position => {
+    column.getStart = (position) => {
       const columns = !position
         ? table.getVisibleLeafColumns()
         : position === 'left'
           ? table.getLeftVisibleLeafColumns()
           : table.getRightVisibleLeafColumns()
 
-      const index = columns.findIndex(d => d.id === column.id)
+      const index = columns.findIndex((d) => d.id === column.id)
 
       if (index > 0) {
         const prevSiblingColumn = columns[index - 1]!
@@ -294,7 +294,7 @@ export const ColumnSizing: TableFeature = {
 
   createHeader: <TData extends RowData, TValue>(
     header: Header<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     header.getSize = () => {
       let sum = 0
@@ -340,7 +340,9 @@ export const ColumnSizing: TableFeature = {
         const startSize = header.getSize()
 
         const columnSizingStart: [string, number][] = header
-          ? header.getLeafHeaders().map(d => [d.column.id, d.column.getSize()])
+          ? header
+              .getLeafHeaders()
+              .map((d) => [d.column.id, d.column.getSize()])
           : [[column.id, column.getSize()]]
 
         const clientX = isTouchStartEvent(e)
@@ -351,26 +353,26 @@ export const ColumnSizing: TableFeature = {
 
         const updateOffset = (
           eventType: 'move' | 'end',
-          clientXPos?: number
+          clientXPos?: number,
         ) => {
           if (typeof clientXPos !== 'number') {
             return
           }
 
-          table.setColumnSizingInfo(old => {
+          table.setColumnSizingInfo((old) => {
             const deltaDirection =
               table.options.columnResizeDirection === 'rtl' ? -1 : 1
             const deltaOffset =
               (clientXPos - (old?.startOffset ?? 0)) * deltaDirection
             const deltaPercentage = Math.max(
               deltaOffset / (old?.startSize ?? 0),
-              -0.999999
+              -0.999999,
             )
 
             old.columnSizingStart.forEach(([columnId, headerSize]) => {
               newColumnSizing[columnId] =
                 Math.round(
-                  Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
+                  Math.max(headerSize + headerSize * deltaPercentage, 0) * 100,
                 ) / 100
             })
 
@@ -385,7 +387,7 @@ export const ColumnSizing: TableFeature = {
             table.options.columnResizeMode === 'onChange' ||
             eventType === 'end'
           ) {
-            table.setColumnSizing(old => ({
+            table.setColumnSizing((old) => ({
               ...old,
               ...newColumnSizing,
             }))
@@ -397,7 +399,7 @@ export const ColumnSizing: TableFeature = {
         const onEnd = (clientXPos?: number) => {
           updateOffset('end', clientXPos)
 
-          table.setColumnSizingInfo(old => ({
+          table.setColumnSizingInfo((old) => ({
             ...old,
             isResizingColumn: false,
             startOffset: null,
@@ -445,27 +447,27 @@ export const ColumnSizing: TableFeature = {
           document.addEventListener(
             'touchmove',
             touchEvents.moveHandler,
-            passiveIfSupported
+            passiveIfSupported,
           )
           document.addEventListener(
             'touchend',
             touchEvents.upHandler,
-            passiveIfSupported
+            passiveIfSupported,
           )
         } else {
           document.addEventListener(
             'mousemove',
             mouseEvents.moveHandler,
-            passiveIfSupported
+            passiveIfSupported,
           )
           document.addEventListener(
             'mouseup',
             mouseEvents.upHandler,
-            passiveIfSupported
+            passiveIfSupported,
           )
         }
 
-        table.setColumnSizingInfo(old => ({
+        table.setColumnSizingInfo((old) => ({
           ...old,
           startOffset: clientX,
           startSize,
@@ -479,21 +481,21 @@ export const ColumnSizing: TableFeature = {
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setColumnSizing = updater =>
+    table.setColumnSizing = (updater) =>
       table.options.onColumnSizingChange?.(updater)
-    table.setColumnSizingInfo = updater =>
+    table.setColumnSizingInfo = (updater) =>
       table.options.onColumnSizingInfoChange?.(updater)
-    table.resetColumnSizing = defaultState => {
+    table.resetColumnSizing = (defaultState) => {
       table.setColumnSizing(
-        defaultState ? {} : table.initialState.columnSizing ?? {}
+        defaultState ? {} : table.initialState.columnSizing ?? {},
       )
     }
-    table.resetHeaderSizeInfo = defaultState => {
+    table.resetHeaderSizeInfo = (defaultState) => {
       table.setColumnSizingInfo(
         defaultState
           ? getDefaultColumnSizingInfoState()
           : table.initialState.columnSizingInfo ??
-              getDefaultColumnSizingInfoState()
+              getDefaultColumnSizingInfoState(),
       )
     }
     table.getTotalSize = () =>
diff --git a/packages/table-core/src/features/Expanding.ts b/packages/table-core/src/features/Expanding.ts
index b67cec939c..3171cf0bca 100644
--- a/packages/table-core/src/features/Expanding.ts
+++ b/packages/table-core/src/features/Expanding.ts
@@ -169,7 +169,7 @@ export const Expanding: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): ExpandedOptions<TData> => {
     return {
       onExpandedChange: makeStateUpdater('expanded', table),
@@ -202,21 +202,21 @@ export const Expanding: TableFeature = {
         })
       }
     }
-    table.setExpanded = updater => table.options.onExpandedChange?.(updater)
-    table.toggleAllRowsExpanded = expanded => {
+    table.setExpanded = (updater) => table.options.onExpandedChange?.(updater)
+    table.toggleAllRowsExpanded = (expanded) => {
       if (expanded ?? !table.getIsAllRowsExpanded()) {
         table.setExpanded(true)
       } else {
         table.setExpanded({})
       }
     }
-    table.resetExpanded = defaultState => {
+    table.resetExpanded = (defaultState) => {
       table.setExpanded(defaultState ? {} : table.initialState?.expanded ?? {})
     }
     table.getCanSomeRowsExpand = () => {
       return table
         .getPrePaginationRowModel()
-        .flatRows.some(row => row.getCanExpand())
+        .flatRows.some((row) => row.getCanExpand())
     }
     table.getToggleAllRowsExpandedHandler = () => {
       return (e: unknown) => {
@@ -241,7 +241,7 @@ export const Expanding: TableFeature = {
       }
 
       // If any row is not expanded, return false
-      if (table.getRowModel().flatRows.some(row => !row.getIsExpanded())) {
+      if (table.getRowModel().flatRows.some((row) => !row.getIsExpanded())) {
         return false
       }
 
@@ -256,7 +256,7 @@ export const Expanding: TableFeature = {
           ? Object.keys(table.getRowModel().rowsById)
           : Object.keys(table.getState().expanded)
 
-      rowIds.forEach(id => {
+      rowIds.forEach((id) => {
         const splitId = id.split('.')
         maxDepth = Math.max(maxDepth, splitId.length)
       })
@@ -279,16 +279,16 @@ export const Expanding: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
-    row.toggleExpanded = expanded => {
-      table.setExpanded(old => {
+    row.toggleExpanded = (expanded) => {
+      table.setExpanded((old) => {
         const exists = old === true ? true : !!old?.[row.id]
 
         let oldExpanded: ExpandedStateList = {}
 
         if (old === true) {
-          Object.keys(table.getRowModel().rowsById).forEach(rowId => {
+          Object.keys(table.getRowModel().rowsById).forEach((rowId) => {
             oldExpanded[rowId] = true
           })
         } else {
diff --git a/packages/table-core/src/features/Filters.ts b/packages/table-core/src/features/Filters.ts
index 57d3709cc9..d2cb9565e3 100644
--- a/packages/table-core/src/features/Filters.ts
+++ b/packages/table-core/src/features/Filters.ts
@@ -36,7 +36,7 @@ export interface FilterFn<TData extends RowData> {
     row: Row<TData>,
     columnId: string,
     filterValue: any,
-    addMeta: (meta: FilterMeta) => void
+    addMeta: (meta: FilterMeta) => void,
   ): boolean
 
   resolveFilterValue?: TransformFilterValueFn<TData>
@@ -45,12 +45,12 @@ export interface FilterFn<TData extends RowData> {
 
 export type TransformFilterValueFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData, unknown>
+  column?: Column<TData, unknown>,
 ) => unknown
 
 export type ColumnFilterAutoRemoveTestFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData, unknown>
+  column?: Column<TData, unknown>,
 ) => boolean
 
 export type CustomFilterFns<TData extends RowData> = Record<
@@ -259,15 +259,15 @@ interface FiltersOptionsBase<TData extends RowData> {
   // Faceting
   getFacetedRowModel?: (
     table: Table<TData>,
-    columnId: string
+    columnId: string,
   ) => () => RowModel<TData>
   getFacetedUniqueValues?: (
     table: Table<TData>,
-    columnId: string
+    columnId: string,
   ) => () => Map<any, number>
   getFacetedMinMaxValues?: (
     table: Table<TData>,
-    columnId: string
+    columnId: string,
   ) => () => undefined | [number, number]
 }
 
@@ -380,7 +380,7 @@ export const Filters: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): FiltersOptions<TData> => {
     return {
       onColumnFiltersChange: makeStateUpdater('columnFilters', table),
@@ -388,7 +388,7 @@ export const Filters: TableFeature = {
       filterFromLeafRows: false,
       maxLeafRowFilterDepth: 100,
       globalFilterFn: 'auto',
-      getColumnCanGlobalFilter: column => {
+      getColumnCanGlobalFilter: (column) => {
         const value = table
           .getCoreRowModel()
           .flatRows[0]?._getAllCellsByColumnId()
@@ -401,7 +401,7 @@ export const Filters: TableFeature = {
 
   createColumn: <TData extends RowData>(
     column: Column<TData, unknown>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     column.getAutoFilterFn = () => {
       const firstRow = table.getCoreRowModel().flatRows[0]
@@ -461,33 +461,33 @@ export const Filters: TableFeature = {
     column.getIsFiltered = () => column.getFilterIndex() > -1
 
     column.getFilterValue = () =>
-      table.getState().columnFilters?.find(d => d.id === column.id)?.value
+      table.getState().columnFilters?.find((d) => d.id === column.id)?.value
 
     column.getFilterIndex = () =>
-      table.getState().columnFilters?.findIndex(d => d.id === column.id) ?? -1
+      table.getState().columnFilters?.findIndex((d) => d.id === column.id) ?? -1
 
-    column.setFilterValue = value => {
-      table.setColumnFilters(old => {
+    column.setFilterValue = (value) => {
+      table.setColumnFilters((old) => {
         const filterFn = column.getFilterFn()
-        const previousfilter = old?.find(d => d.id === column.id)
+        const previousfilter = old?.find((d) => d.id === column.id)
 
         const newFilter = functionalUpdate(
           value,
-          previousfilter ? previousfilter.value : undefined
+          previousfilter ? previousfilter.value : undefined,
         )
 
         //
         if (
           shouldAutoRemoveFilter(filterFn as FilterFn<TData>, newFilter, column)
         ) {
-          return old?.filter(d => d.id !== column.id) ?? []
+          return old?.filter((d) => d.id !== column.id) ?? []
         }
 
         const newFilterObj = { id: column.id, value: newFilter }
 
         if (previousfilter) {
           return (
-            old?.map(d => {
+            old?.map((d) => {
               if (d.id === column.id) {
                 return newFilterObj
               }
@@ -539,7 +539,7 @@ export const Filters: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     row.columnFilters = {}
     row.columnFiltersMeta = {}
@@ -566,8 +566,8 @@ export const Filters: TableFeature = {
       const leafColumns = table.getAllLeafColumns()
 
       const updateFn = (old: ColumnFiltersState) => {
-        return functionalUpdate(updater, old)?.filter(filter => {
-          const column = leafColumns.find(d => d.id === filter.id)
+        return functionalUpdate(updater, old)?.filter((filter) => {
+          const column = leafColumns.find((d) => d.id === filter.id)
 
           if (column) {
             const filterFn = column.getFilterFn()
@@ -584,19 +584,19 @@ export const Filters: TableFeature = {
       table.options.onColumnFiltersChange?.(updateFn)
     }
 
-    table.setGlobalFilter = updater => {
+    table.setGlobalFilter = (updater) => {
       table.options.onGlobalFilterChange?.(updater)
     }
 
-    table.resetGlobalFilter = defaultState => {
+    table.resetGlobalFilter = (defaultState) => {
       table.setGlobalFilter(
-        defaultState ? undefined : table.initialState.globalFilter
+        defaultState ? undefined : table.initialState.globalFilter,
       )
     }
 
-    table.resetColumnFilters = defaultState => {
+    table.resetColumnFilters = (defaultState) => {
       table.setColumnFilters(
-        defaultState ? [] : table.initialState?.columnFilters ?? []
+        defaultState ? [] : table.initialState?.columnFilters ?? [],
       )
     }
 
@@ -652,7 +652,7 @@ export const Filters: TableFeature = {
 export function shouldAutoRemoveFilter<TData extends RowData>(
   filterFn?: FilterFn<TData>,
   value?: any,
-  column?: Column<TData, unknown>
+  column?: Column<TData, unknown>,
 ) {
   return (
     (filterFn && filterFn.autoRemove
diff --git a/packages/table-core/src/features/Grouping.ts b/packages/table-core/src/features/Grouping.ts
index dac58dd1e2..6599c4d2ae 100644
--- a/packages/table-core/src/features/Grouping.ts
+++ b/packages/table-core/src/features/Grouping.ts
@@ -23,7 +23,7 @@ export interface GroupingTableState {
 export type AggregationFn<TData extends RowData> = (
   columnId: string,
   leafRows: Row<TData>[],
-  childRows: Row<TData>[]
+  childRows: Row<TData>[],
 ) => any
 
 export type CustomAggregationFns = Record<string, AggregationFn<any>>
@@ -245,7 +245,8 @@ export const Grouping: TableFeature = {
     unknown
   > => {
     return {
-      aggregatedCell: props => (props.getValue() as any)?.toString?.() ?? null,
+      aggregatedCell: (props) =>
+        (props.getValue() as any)?.toString?.() ?? null,
       aggregationFn: 'auto',
     }
   },
@@ -258,7 +259,7 @@ export const Grouping: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): GroupingOptions => {
     return {
       onGroupingChange: makeStateUpdater('grouping', table),
@@ -268,13 +269,13 @@ export const Grouping: TableFeature = {
 
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     column.toggleGrouping = () => {
-      table.setGrouping(old => {
+      table.setGrouping((old) => {
         // Find any existing grouping for this column
         if (old?.includes(column.id)) {
-          return old.filter(d => d !== column.id)
+          return old.filter((d) => d !== column.id)
         }
 
         return [...(old ?? []), column.id]
@@ -337,9 +338,9 @@ export const Grouping: TableFeature = {
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setGrouping = updater => table.options.onGroupingChange?.(updater)
+    table.setGrouping = (updater) => table.options.onGroupingChange?.(updater)
 
-    table.resetGrouping = defaultState => {
+    table.resetGrouping = (defaultState) => {
       table.setGrouping(defaultState ? [] : table.initialState?.grouping ?? [])
     }
 
@@ -359,10 +360,10 @@ export const Grouping: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     row.getIsGrouped = () => !!row.groupingColumnId
-    row.getGroupingValue = columnId => {
+    row.getGroupingValue = (columnId) => {
       if (row._groupingValuesCache.hasOwnProperty(columnId)) {
         return row._groupingValuesCache[columnId]
       }
@@ -374,7 +375,7 @@ export const Grouping: TableFeature = {
       }
 
       row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(
-        row.original
+        row.original,
       )
 
       return row._groupingValuesCache[columnId]
@@ -386,7 +387,7 @@ export const Grouping: TableFeature = {
     cell: Cell<TData, TValue>,
     column: Column<TData, TValue>,
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     const getRenderValue = () =>
       cell.getValue() ?? table.options.renderFallbackValue
@@ -402,14 +403,14 @@ export const Grouping: TableFeature = {
 export function orderColumns<TData extends RowData>(
   leafColumns: Column<TData, unknown>[],
   grouping: string[],
-  groupedColumnMode?: GroupingColumnMode
+  groupedColumnMode?: GroupingColumnMode,
 ) {
   if (!grouping?.length || !groupedColumnMode) {
     return leafColumns
   }
 
   const nonGroupingColumns = leafColumns.filter(
-    col => !grouping.includes(col.id)
+    (col) => !grouping.includes(col.id),
   )
 
   if (groupedColumnMode === 'remove') {
@@ -417,7 +418,7 @@ export function orderColumns<TData extends RowData>(
   }
 
   const groupingColumns = grouping
-    .map(g => leafColumns.find(col => col.id === g)!)
+    .map((g) => leafColumns.find((col) => col.id === g)!)
     .filter(Boolean)
 
   return [...groupingColumns, ...nonGroupingColumns]
diff --git a/packages/table-core/src/features/Ordering.ts b/packages/table-core/src/features/Ordering.ts
index 80ff8287c5..1d55f34dc9 100644
--- a/packages/table-core/src/features/Ordering.ts
+++ b/packages/table-core/src/features/Ordering.ts
@@ -26,7 +26,7 @@ export interface ColumnOrderDefaultOptions {
 
 export interface ColumnOrderInstance<TData extends RowData> {
   _getOrderColumnsFn: () => (
-    columns: Column<TData, unknown>[]
+    columns: Column<TData, unknown>[],
   ) => Column<TData, unknown>[]
   /**
    * Resets the **columnOrder** state to `initialState.columnOrder`, or `true` can be passed to force a default blank state reset to `[]`.
@@ -53,7 +53,7 @@ export const Ordering: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): ColumnOrderDefaultOptions => {
     return {
       onColumnOrderChange: makeStateUpdater('columnOrder', table),
@@ -61,11 +61,11 @@ export const Ordering: TableFeature = {
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setColumnOrder = updater =>
+    table.setColumnOrder = (updater) =>
       table.options.onColumnOrderChange?.(updater)
-    table.resetColumnOrder = defaultState => {
+    table.resetColumnOrder = (defaultState) => {
       table.setColumnOrder(
-        defaultState ? [] : table.initialState.columnOrder ?? []
+        defaultState ? [] : table.initialState.columnOrder ?? [],
       )
     }
     table._getOrderColumnsFn = memo(
@@ -74,7 +74,7 @@ export const Ordering: TableFeature = {
         table.getState().grouping,
         table.options.groupedColumnMode,
       ],
-      (columnOrder, grouping, groupedColumnMode) => columns => {
+      (columnOrder, grouping, groupedColumnMode) => (columns) => {
         // Sort grouped columns to the start of the column list
         // before the headers are built
         let orderedColumns: Column<TData, unknown>[] = []
@@ -94,7 +94,7 @@ export const Ordering: TableFeature = {
           while (columnsCopy.length && columnOrderCopy.length) {
             const targetColumnId = columnOrderCopy.shift()
             const foundIndex = columnsCopy.findIndex(
-              d => d.id === targetColumnId
+              (d) => d.id === targetColumnId,
             )
             if (foundIndex > -1) {
               orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
@@ -110,7 +110,7 @@ export const Ordering: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn',
         // debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
   },
 }
diff --git a/packages/table-core/src/features/Pagination.ts b/packages/table-core/src/features/Pagination.ts
index 9493902d86..9d07d4333e 100644
--- a/packages/table-core/src/features/Pagination.ts
+++ b/packages/table-core/src/features/Pagination.ts
@@ -171,7 +171,7 @@ export const Pagination: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): PaginationDefaultOptions => {
     return {
       onPaginationChange: makeStateUpdater('pagination', table),
@@ -203,8 +203,8 @@ export const Pagination: TableFeature = {
         })
       }
     }
-    table.setPagination = updater => {
-      const safeUpdater: Updater<PaginationState> = old => {
+    table.setPagination = (updater) => {
+      const safeUpdater: Updater<PaginationState> = (old) => {
         let newState = functionalUpdate(updater, old)
 
         return newState
@@ -212,15 +212,15 @@ export const Pagination: TableFeature = {
 
       return table.options.onPaginationChange?.(safeUpdater)
     }
-    table.resetPagination = defaultState => {
+    table.resetPagination = (defaultState) => {
       table.setPagination(
         defaultState
           ? getDefaultPaginationState()
-          : table.initialState.pagination ?? getDefaultPaginationState()
+          : table.initialState.pagination ?? getDefaultPaginationState(),
       )
     }
-    table.setPageIndex = updater => {
-      table.setPagination(old => {
+    table.setPageIndex = (updater) => {
+      table.setPagination((old) => {
         let pageIndex = functionalUpdate(updater, old.pageIndex)
 
         const maxPageIndex =
@@ -237,22 +237,22 @@ export const Pagination: TableFeature = {
         }
       })
     }
-    table.resetPageIndex = defaultState => {
+    table.resetPageIndex = (defaultState) => {
       table.setPageIndex(
         defaultState
           ? defaultPageIndex
-          : table.initialState?.pagination?.pageIndex ?? defaultPageIndex
+          : table.initialState?.pagination?.pageIndex ?? defaultPageIndex,
       )
     }
-    table.resetPageSize = defaultState => {
+    table.resetPageSize = (defaultState) => {
       table.setPageSize(
         defaultState
           ? defaultPageSize
-          : table.initialState?.pagination?.pageSize ?? defaultPageSize
+          : table.initialState?.pagination?.pageSize ?? defaultPageSize,
       )
     }
-    table.setPageSize = updater => {
-      table.setPagination(old => {
+    table.setPageSize = (updater) => {
+      table.setPagination((old) => {
         const pageSize = Math.max(1, functionalUpdate(updater, old.pageSize))
         const topRowIndex = old.pageSize * old.pageIndex!
         const pageIndex = Math.floor(topRowIndex / pageSize)
@@ -264,11 +264,11 @@ export const Pagination: TableFeature = {
         }
       })
     }
-    table.setPageCount = updater =>
-      table.setPagination(old => {
+    table.setPageCount = (updater) =>
+      table.setPagination((old) => {
         let newPageCount = functionalUpdate(
           updater,
-          table.options.pageCount ?? -1
+          table.options.pageCount ?? -1,
         )
 
         if (typeof newPageCount === 'number') {
@@ -283,7 +283,7 @@ export const Pagination: TableFeature = {
 
     table.getPageOptions = memo(
       () => [table.getPageCount()],
-      pageCount => {
+      (pageCount) => {
         let pageOptions: number[] = []
         if (pageCount && pageCount > 0) {
           pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i)
@@ -293,7 +293,7 @@ export const Pagination: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getPageOptions',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 
     table.getCanPreviousPage = () => table.getState().pagination.pageIndex > 0
@@ -315,11 +315,11 @@ export const Pagination: TableFeature = {
     }
 
     table.previousPage = () => {
-      return table.setPageIndex(old => old - 1)
+      return table.setPageIndex((old) => old - 1)
     }
 
     table.nextPage = () => {
-      return table.setPageIndex(old => {
+      return table.setPageIndex((old) => {
         return old + 1
       })
     }
@@ -346,7 +346,7 @@ export const Pagination: TableFeature = {
         table.options.pageCount ??
         Math.ceil(
           table.getPrePaginationRowModel().rows.length /
-            table.getState().pagination.pageSize
+            table.getState().pagination.pageSize,
         )
       )
     }
diff --git a/packages/table-core/src/features/Pinning.ts b/packages/table-core/src/features/Pinning.ts
index 77e10dc2f4..24f7d52019 100644
--- a/packages/table-core/src/features/Pinning.ts
+++ b/packages/table-core/src/features/Pinning.ts
@@ -165,7 +165,7 @@ export interface RowPinningRow {
   pin: (
     position: RowPinningPosition,
     includeLeafRows?: boolean,
-    includeParentRows?: boolean
+    includeParentRows?: boolean,
   ) => void
 }
 
@@ -270,7 +270,7 @@ export const Pinning: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): ColumnPinningDefaultOptions & RowPinningDefaultOptions => {
     return {
       onColumnPinningChange: makeStateUpdater('columnPinning', table),
@@ -280,20 +280,20 @@ export const Pinning: TableFeature = {
 
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
-    column.pin = position => {
+    column.pin = (position) => {
       const columnIds = column
         .getLeafColumns()
-        .map(d => d.id)
+        .map((d) => d.id)
         .filter(Boolean) as string[]
 
-      table.setColumnPinning(old => {
+      table.setColumnPinning((old) => {
         if (position === 'right') {
           return {
-            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+            left: (old?.left ?? []).filter((d) => !columnIds?.includes(d)),
             right: [
-              ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
+              ...(old?.right ?? []).filter((d) => !columnIds?.includes(d)),
               ...columnIds,
             ],
           }
@@ -302,16 +302,16 @@ export const Pinning: TableFeature = {
         if (position === 'left') {
           return {
             left: [
-              ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
+              ...(old?.left ?? []).filter((d) => !columnIds?.includes(d)),
               ...columnIds,
             ],
-            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+            right: (old?.right ?? []).filter((d) => !columnIds?.includes(d)),
           }
         }
 
         return {
-          left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
-          right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+          left: (old?.left ?? []).filter((d) => !columnIds?.includes(d)),
+          right: (old?.right ?? []).filter((d) => !columnIds?.includes(d)),
         }
       })
     }
@@ -320,21 +320,21 @@ export const Pinning: TableFeature = {
       const leafColumns = column.getLeafColumns()
 
       return leafColumns.some(
-        d =>
+        (d) =>
           (d.columnDef.enablePinning ?? true) &&
           (table.options.enableColumnPinning ??
             table.options.enablePinning ??
-            true)
+            true),
       )
     }
 
     column.getIsPinned = () => {
-      const leafColumnIds = column.getLeafColumns().map(d => d.id)
+      const leafColumnIds = column.getLeafColumns().map((d) => d.id)
 
       const { left, right } = table.getState().columnPinning
 
-      const isLeft = leafColumnIds.some(d => left?.includes(d))
-      const isRight = leafColumnIds.some(d => right?.includes(d))
+      const isLeft = leafColumnIds.some((d) => left?.includes(d))
+      const isRight = leafColumnIds.some((d) => right?.includes(d))
 
       return isLeft ? 'left' : isRight ? 'right' : false
     }
@@ -350,7 +350,7 @@ export const Pinning: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     row.pin = (position, includeLeafRows, includeParentRows) => {
       const leafRowIds = includeLeafRows
@@ -361,12 +361,12 @@ export const Pinning: TableFeature = {
         : []
       const rowIds = new Set([...parentRowIds, row.id, ...leafRowIds])
 
-      table.setRowPinning(old => {
+      table.setRowPinning((old) => {
         if (position === 'bottom') {
           return {
-            top: (old?.top ?? []).filter(d => !rowIds?.has(d)),
+            top: (old?.top ?? []).filter((d) => !rowIds?.has(d)),
             bottom: [
-              ...(old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+              ...(old?.bottom ?? []).filter((d) => !rowIds?.has(d)),
               ...Array.from(rowIds),
             ],
           }
@@ -375,16 +375,16 @@ export const Pinning: TableFeature = {
         if (position === 'top') {
           return {
             top: [
-              ...(old?.top ?? []).filter(d => !rowIds?.has(d)),
+              ...(old?.top ?? []).filter((d) => !rowIds?.has(d)),
               ...Array.from(rowIds),
             ],
-            bottom: (old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+            bottom: (old?.bottom ?? []).filter((d) => !rowIds?.has(d)),
           }
         }
 
         return {
-          top: (old?.top ?? []).filter(d => !rowIds?.has(d)),
-          bottom: (old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+          top: (old?.top ?? []).filter((d) => !rowIds?.has(d)),
+          bottom: (old?.bottom ?? []).filter((d) => !rowIds?.has(d)),
         }
       })
     }
@@ -400,8 +400,8 @@ export const Pinning: TableFeature = {
 
       const { top, bottom } = table.getState().rowPinning
 
-      const isTop = rowIds.some(d => top?.includes(d))
-      const isBottom = rowIds.some(d => bottom?.includes(d))
+      const isTop = rowIds.some((d) => top?.includes(d))
+      const isBottom = rowIds.some((d) => bottom?.includes(d))
 
       return isTop ? 'top' : isBottom ? 'bottom' : false
     }
@@ -424,21 +424,23 @@ export const Pinning: TableFeature = {
       (allCells, left, right) => {
         const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
 
-        return allCells.filter(d => !leftAndRight.includes(d.column.id))
+        return allCells.filter((d) => !leftAndRight.includes(d.column.id))
       },
       {
         key:
           process.env.NODE_ENV === 'development' && 'row.getCenterVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
     row.getLeftVisibleCells = memo(
       () => [row._getAllVisibleCells(), table.getState().columnPinning.left, ,],
       (allCells, left) => {
         const cells = (left ?? [])
-          .map(columnId => allCells.find(cell => cell.column.id === columnId)!)
+          .map(
+            (columnId) => allCells.find((cell) => cell.column.id === columnId)!,
+          )
           .filter(Boolean)
-          .map(d => ({ ...d, position: 'left' }) as Cell<TData, unknown>)
+          .map((d) => ({ ...d, position: 'left' }) as Cell<TData, unknown>)
 
         return cells
       },
@@ -446,15 +448,17 @@ export const Pinning: TableFeature = {
         key:
           process.env.NODE_ENV === 'development' && 'row.getLeftVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
     row.getRightVisibleCells = memo(
       () => [row._getAllVisibleCells(), table.getState().columnPinning.right],
       (allCells, right) => {
         const cells = (right ?? [])
-          .map(columnId => allCells.find(cell => cell.column.id === columnId)!)
+          .map(
+            (columnId) => allCells.find((cell) => cell.column.id === columnId)!,
+          )
           .filter(Boolean)
-          .map(d => ({ ...d, position: 'right' }) as Cell<TData, unknown>)
+          .map((d) => ({ ...d, position: 'right' }) as Cell<TData, unknown>)
 
         return cells
       },
@@ -462,22 +466,22 @@ export const Pinning: TableFeature = {
         key:
           process.env.NODE_ENV === 'development' && 'row.getRightVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setColumnPinning = updater =>
+    table.setColumnPinning = (updater) =>
       table.options.onColumnPinningChange?.(updater)
 
-    table.resetColumnPinning = defaultState =>
+    table.resetColumnPinning = (defaultState) =>
       table.setColumnPinning(
         defaultState
           ? getDefaultColumnPinningState()
-          : table.initialState?.columnPinning ?? getDefaultColumnPinningState()
+          : table.initialState?.columnPinning ?? getDefaultColumnPinningState(),
       )
 
-    table.getIsSomeColumnsPinned = position => {
+    table.getIsSomeColumnsPinned = (position) => {
       const pinningState = table.getState().columnPinning
 
       if (!position) {
@@ -490,26 +494,30 @@ export const Pinning: TableFeature = {
       () => [table.getAllLeafColumns(), table.getState().columnPinning.left],
       (allColumns, left) => {
         return (left ?? [])
-          .map(columnId => allColumns.find(column => column.id === columnId)!)
+          .map(
+            (columnId) => allColumns.find((column) => column.id === columnId)!,
+          )
           .filter(Boolean)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     )
 
     table.getRightLeafColumns = memo(
       () => [table.getAllLeafColumns(), table.getState().columnPinning.right],
       (allColumns, right) => {
         return (right ?? [])
-          .map(columnId => allColumns.find(column => column.id === columnId)!)
+          .map(
+            (columnId) => allColumns.find((column) => column.id === columnId)!,
+          )
           .filter(Boolean)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     )
 
     table.getCenterLeafColumns = memo(
@@ -521,24 +529,25 @@ export const Pinning: TableFeature = {
       (allColumns, left, right) => {
         const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
 
-        return allColumns.filter(d => !leftAndRight.includes(d.id))
+        return allColumns.filter((d) => !leftAndRight.includes(d.id))
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
         debug: () => table.options.debugAll ?? table.options.debugColumns,
-      }
+      },
     )
 
-    table.setRowPinning = updater => table.options.onRowPinningChange?.(updater)
+    table.setRowPinning = (updater) =>
+      table.options.onRowPinningChange?.(updater)
 
-    table.resetRowPinning = defaultState =>
+    table.resetRowPinning = (defaultState) =>
       table.setRowPinning(
         defaultState
           ? getDefaultRowPinningState()
-          : table.initialState?.rowPinning ?? getDefaultRowPinningState()
+          : table.initialState?.rowPinning ?? getDefaultRowPinningState(),
       )
 
-    table.getIsSomeRowsPinned = position => {
+    table.getIsSomeRowsPinned = (position) => {
       const pinningState = table.getState().rowPinning
 
       if (!position) {
@@ -555,25 +564,25 @@ export const Pinning: TableFeature = {
             table.options.keepPinnedRows ?? true
               ? //get all rows that are pinned even if they would not be otherwise visible
                 //account for expanded parent rows, but not pagination or filtering
-                (pinnedRowIds ?? []).map(rowId => {
+                (pinnedRowIds ?? []).map((rowId) => {
                   const row = table.getRow(rowId, true)
                   return row.getIsAllParentsExpanded() ? row : null
                 })
               : //else get only visible rows that are pinned
                 (pinnedRowIds ?? []).map(
-                  rowId => visibleRows.find(row => row.id === rowId)!
+                  (rowId) => visibleRows.find((row) => row.id === rowId)!,
                 )
 
           return rows
             .filter(Boolean)
-            .map(d => ({ ...d, position })) as Row<TData>[]
+            .map((d) => ({ ...d, position })) as Row<TData>[]
         },
         {
           key:
             process.env.NODE_ENV === 'development' &&
             `row.get${position === 'top' ? 'Top' : 'Bottom'}Rows`,
           debug: () => table.options.debugAll ?? table.options.debugRows,
-        }
+        },
       )()
 
     table.getTopRows = () => table._getPinnedRows('top')
@@ -588,12 +597,12 @@ export const Pinning: TableFeature = {
       ],
       (allRows, top, bottom) => {
         const topAndBottom = new Set([...(top ?? []), ...(bottom ?? [])])
-        return allRows.filter(d => !topAndBottom.has(d.id))
+        return allRows.filter((d) => !topAndBottom.has(d.id))
       },
       {
         key: process.env.NODE_ENV === 'development' && 'row.getCenterRows',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
   },
 }
diff --git a/packages/table-core/src/features/RowSelection.ts b/packages/table-core/src/features/RowSelection.ts
index efb927600b..d5c9892ec0 100644
--- a/packages/table-core/src/features/RowSelection.ts
+++ b/packages/table-core/src/features/RowSelection.ts
@@ -198,7 +198,7 @@ export const RowSelection: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): RowSelectionOptions<TData> => {
     return {
       onRowSelectionChange: makeStateUpdater('rowSelection', table),
@@ -212,14 +212,14 @@ export const RowSelection: TableFeature = {
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setRowSelection = updater =>
+    table.setRowSelection = (updater) =>
       table.options.onRowSelectionChange?.(updater)
-    table.resetRowSelection = defaultState =>
+    table.resetRowSelection = (defaultState) =>
       table.setRowSelection(
-        defaultState ? {} : table.initialState.rowSelection ?? {}
+        defaultState ? {} : table.initialState.rowSelection ?? {},
       )
-    table.toggleAllRowsSelected = value => {
-      table.setRowSelection(old => {
+    table.toggleAllRowsSelected = (value) => {
+      table.setRowSelection((old) => {
         value =
           typeof value !== 'undefined' ? value : !table.getIsAllRowsSelected()
 
@@ -230,14 +230,14 @@ export const RowSelection: TableFeature = {
         // We don't use `mutateRowIsSelected` here for performance reasons.
         // All of the rows are flat already, so it wouldn't be worth it
         if (value) {
-          preGroupedFlatRows.forEach(row => {
+          preGroupedFlatRows.forEach((row) => {
             if (!row.getCanSelect()) {
               return
             }
             rowSelection[row.id] = true
           })
         } else {
-          preGroupedFlatRows.forEach(row => {
+          preGroupedFlatRows.forEach((row) => {
             delete rowSelection[row.id]
           })
         }
@@ -245,8 +245,8 @@ export const RowSelection: TableFeature = {
         return rowSelection
       })
     }
-    table.toggleAllPageRowsSelected = value =>
-      table.setRowSelection(old => {
+    table.toggleAllPageRowsSelected = (value) =>
+      table.setRowSelection((old) => {
         const resolvedValue =
           typeof value !== 'undefined'
             ? value
@@ -254,7 +254,7 @@ export const RowSelection: TableFeature = {
 
         const rowSelection: RowSelectionState = { ...old }
 
-        table.getRowModel().rows.forEach(row => {
+        table.getRowModel().rows.forEach((row) => {
           mutateRowIsSelected(rowSelection, row.id, resolvedValue, true, table)
         })
 
@@ -336,7 +336,7 @@ export const RowSelection: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'getSelectedRowModel',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 
     table.getFilteredSelectedRowModel = memo(
@@ -357,7 +357,7 @@ export const RowSelection: TableFeature = {
           process.env.NODE_ENV === 'production' &&
           'getFilteredSelectedRowModel',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 
     table.getGroupedSelectedRowModel = memo(
@@ -377,7 +377,7 @@ export const RowSelection: TableFeature = {
         key:
           process.env.NODE_ENV === 'production' && 'getGroupedSelectedRowModel',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 
     ///
@@ -401,13 +401,13 @@ export const RowSelection: TableFeature = {
       const { rowSelection } = table.getState()
 
       let isAllRowsSelected = Boolean(
-        preGroupedFlatRows.length && Object.keys(rowSelection).length
+        preGroupedFlatRows.length && Object.keys(rowSelection).length,
       )
 
       if (isAllRowsSelected) {
         if (
           preGroupedFlatRows.some(
-            row => row.getCanSelect() && !rowSelection[row.id]
+            (row) => row.getCanSelect() && !rowSelection[row.id],
           )
         ) {
           isAllRowsSelected = false
@@ -420,14 +420,14 @@ export const RowSelection: TableFeature = {
     table.getIsAllPageRowsSelected = () => {
       const paginationFlatRows = table
         .getPaginationRowModel()
-        .flatRows.filter(row => row.getCanSelect())
+        .flatRows.filter((row) => row.getCanSelect())
       const { rowSelection } = table.getState()
 
       let isAllPageRowsSelected = !!paginationFlatRows.length
 
       if (
         isAllPageRowsSelected &&
-        paginationFlatRows.some(row => !rowSelection[row.id])
+        paginationFlatRows.some((row) => !rowSelection[row.id])
       ) {
         isAllPageRowsSelected = false
       }
@@ -437,7 +437,7 @@ export const RowSelection: TableFeature = {
 
     table.getIsSomeRowsSelected = () => {
       const totalSelected = Object.keys(
-        table.getState().rowSelection ?? {}
+        table.getState().rowSelection ?? {},
       ).length
       return (
         totalSelected > 0 &&
@@ -450,14 +450,14 @@ export const RowSelection: TableFeature = {
       return table.getIsAllPageRowsSelected()
         ? false
         : paginationFlatRows
-            .filter(row => row.getCanSelect())
-            .some(d => d.getIsSelected() || d.getIsSomeSelected())
+            .filter((row) => row.getCanSelect())
+            .some((d) => d.getIsSelected() || d.getIsSomeSelected())
     }
 
     table.getToggleAllRowsSelectedHandler = () => {
       return (e: unknown) => {
         table.toggleAllRowsSelected(
-          ((e as MouseEvent).target as HTMLInputElement).checked
+          ((e as MouseEvent).target as HTMLInputElement).checked,
         )
       }
     }
@@ -465,7 +465,7 @@ export const RowSelection: TableFeature = {
     table.getToggleAllPageRowsSelectedHandler = () => {
       return (e: unknown) => {
         table.toggleAllPageRowsSelected(
-          ((e as MouseEvent).target as HTMLInputElement).checked
+          ((e as MouseEvent).target as HTMLInputElement).checked,
         )
       }
     }
@@ -473,12 +473,12 @@ export const RowSelection: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     row.toggleSelected = (value, opts) => {
       const isSelected = row.getIsSelected()
 
-      table.setRowSelection(old => {
+      table.setRowSelection((old) => {
         value = typeof value !== 'undefined' ? value : !isSelected
 
         if (row.getCanSelect() && isSelected === value) {
@@ -492,7 +492,7 @@ export const RowSelection: TableFeature = {
           row.id,
           value,
           opts?.selectChildren ?? true,
-          table
+          table,
         )
 
         return selectedRowIds
@@ -542,7 +542,7 @@ export const RowSelection: TableFeature = {
       return (e: unknown) => {
         if (!canSelect) return
         row.toggleSelected(
-          ((e as MouseEvent).target as HTMLInputElement)?.checked
+          ((e as MouseEvent).target as HTMLInputElement)?.checked,
         )
       }
     }
@@ -554,7 +554,7 @@ const mutateRowIsSelected = <TData extends RowData>(
   id: string,
   value: boolean,
   includeChildren: boolean,
-  table: Table<TData>
+  table: Table<TData>,
 ) => {
   const row = table.getRow(id, true)
 
@@ -566,7 +566,7 @@ const mutateRowIsSelected = <TData extends RowData>(
   // ) {
   if (value) {
     if (!row.getCanMultiSelect()) {
-      Object.keys(selectedRowIds).forEach(key => delete selectedRowIds[key])
+      Object.keys(selectedRowIds).forEach((key) => delete selectedRowIds[key])
     }
     if (row.getCanSelect()) {
       selectedRowIds[id] = true
@@ -577,15 +577,21 @@ const mutateRowIsSelected = <TData extends RowData>(
   // }
 
   if (includeChildren && row.subRows?.length && row.getCanSelectSubRows()) {
-    row.subRows.forEach(row =>
-      mutateRowIsSelected(selectedRowIds, row.id, value, includeChildren, table)
+    row.subRows.forEach((row) =>
+      mutateRowIsSelected(
+        selectedRowIds,
+        row.id,
+        value,
+        includeChildren,
+        table,
+      ),
     )
   }
 }
 
 export function selectRowsFn<TData extends RowData>(
   table: Table<TData>,
-  rowModel: RowModel<TData>
+  rowModel: RowModel<TData>,
 ): RowModel<TData> {
   const rowSelection = table.getState().rowSelection
 
@@ -595,7 +601,7 @@ export function selectRowsFn<TData extends RowData>(
   // Filters top level and nested rows
   const recurseRows = (rows: Row<TData>[], depth = 0): Row<TData>[] => {
     return rows
-      .map(row => {
+      .map((row) => {
         const isSelected = isRowSelected(row, rowSelection)
 
         if (isSelected) {
@@ -626,7 +632,7 @@ export function selectRowsFn<TData extends RowData>(
 
 export function isRowSelected<TData extends RowData>(
   row: Row<TData>,
-  selection: Record<string, boolean>
+  selection: Record<string, boolean>,
 ): boolean {
   return selection[row.id] ?? false
 }
@@ -634,14 +640,14 @@ export function isRowSelected<TData extends RowData>(
 export function isSubRowSelected<TData extends RowData>(
   row: Row<TData>,
   selection: Record<string, boolean>,
-  table: Table<TData>
+  table: Table<TData>,
 ): boolean | 'some' | 'all' {
   if (!row.subRows?.length) return false
 
   let allChildrenSelected = true
   let someSelected = false
 
-  row.subRows.forEach(subRow => {
+  row.subRows.forEach((subRow) => {
     // Bail out early if we know both of these
     if (someSelected && !allChildrenSelected) {
       return
diff --git a/packages/table-core/src/features/Sorting.ts b/packages/table-core/src/features/Sorting.ts
index b9cd4e6185..abd6d5e223 100644
--- a/packages/table-core/src/features/Sorting.ts
+++ b/packages/table-core/src/features/Sorting.ts
@@ -288,7 +288,7 @@ export const Sorting: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): SortingOptions<TData> => {
     return {
       onSortingChange: makeStateUpdater('sorting', table),
@@ -300,7 +300,7 @@ export const Sorting: TableFeature = {
 
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     column.getAutoSortingFn = () => {
       const firstRows = table.getFilteredRowModel().flatRows.slice(10)
@@ -366,10 +366,10 @@ export const Sorting: TableFeature = {
       const nextSortingOrder = column.getNextSortingOrder()
       const hasManualValue = typeof desc !== 'undefined' && desc !== null
 
-      table.setSorting(old => {
+      table.setSorting((old) => {
         // Find any existing sorting for this column
-        const existingSorting = old?.find(d => d.id === column.id)
-        const existingIndex = old?.findIndex(d => d.id === column.id)
+        const existingSorting = old?.find((d) => d.id === column.id)
+        const existingIndex = old?.findIndex((d) => d.id === column.id)
 
         let newSorting: SortingState = []
 
@@ -418,11 +418,11 @@ export const Sorting: TableFeature = {
           newSorting.splice(
             0,
             newSorting.length -
-              (table.options.maxMultiSortColCount ?? Number.MAX_SAFE_INTEGER)
+              (table.options.maxMultiSortColCount ?? Number.MAX_SAFE_INTEGER),
           )
         } else if (sortAction === 'toggle') {
           // This flips (or sets) the
-          newSorting = old.map(d => {
+          newSorting = old.map((d) => {
             if (d.id === column.id) {
               return {
                 ...d,
@@ -432,7 +432,7 @@ export const Sorting: TableFeature = {
             return d
           })
         } else if (sortAction === 'remove') {
-          newSorting = old.filter(d => d.id !== column.id)
+          newSorting = old.filter((d) => d.id !== column.id)
         } else {
           newSorting = [
             {
@@ -489,18 +489,20 @@ export const Sorting: TableFeature = {
     }
 
     column.getIsSorted = () => {
-      const columnSort = table.getState().sorting?.find(d => d.id === column.id)
+      const columnSort = table
+        .getState()
+        .sorting?.find((d) => d.id === column.id)
 
       return !columnSort ? false : columnSort.desc ? 'desc' : 'asc'
     }
 
     column.getSortIndex = () =>
-      table.getState().sorting?.findIndex(d => d.id === column.id) ?? -1
+      table.getState().sorting?.findIndex((d) => d.id === column.id) ?? -1
 
     column.clearSorting = () => {
       //clear sorting for just 1 column
-      table.setSorting(old =>
-        old?.length ? old.filter(d => d.id !== column.id) : []
+      table.setSorting((old) =>
+        old?.length ? old.filter((d) => d.id !== column.id) : [],
       )
     }
 
@@ -512,15 +514,17 @@ export const Sorting: TableFeature = {
         ;(e as any).persist?.()
         column.toggleSorting?.(
           undefined,
-          column.getCanMultiSort() ? table.options.isMultiSortEvent?.(e) : false
+          column.getCanMultiSort()
+            ? table.options.isMultiSortEvent?.(e)
+            : false,
         )
       }
     }
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
-    table.setSorting = updater => table.options.onSortingChange?.(updater)
-    table.resetSorting = defaultState => {
+    table.setSorting = (updater) => table.options.onSortingChange?.(updater)
+    table.resetSorting = (defaultState) => {
       table.setSorting(defaultState ? [] : table.initialState?.sorting ?? [])
     }
     table.getPreSortedRowModel = () => table.getGroupedRowModel()
diff --git a/packages/table-core/src/features/Visibility.ts b/packages/table-core/src/features/Visibility.ts
index 2deb419192..8f49c9b650 100644
--- a/packages/table-core/src/features/Visibility.ts
+++ b/packages/table-core/src/features/Visibility.ts
@@ -152,7 +152,7 @@ export const Visibility: TableFeature = {
   },
 
   getDefaultOptions: <TData extends RowData>(
-    table: Table<TData>
+    table: Table<TData>,
   ): VisibilityDefaultOptions => {
     return {
       onColumnVisibilityChange: makeStateUpdater('columnVisibility', table),
@@ -161,11 +161,11 @@ export const Visibility: TableFeature = {
 
   createColumn: <TData extends RowData, TValue>(
     column: Column<TData, TValue>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
-    column.toggleVisibility = value => {
+    column.toggleVisibility = (value) => {
       if (column.getCanHide()) {
-        table.setColumnVisibility(old => ({
+        table.setColumnVisibility((old) => ({
           ...old,
           [column.id]: value ?? !column.getIsVisible(),
         }))
@@ -184,7 +184,7 @@ export const Visibility: TableFeature = {
     column.getToggleVisibilityHandler = () => {
       return (e: unknown) => {
         column.toggleVisibility?.(
-          ((e as MouseEvent).target as HTMLInputElement).checked
+          ((e as MouseEvent).target as HTMLInputElement).checked,
         )
       }
     }
@@ -192,17 +192,17 @@ export const Visibility: TableFeature = {
 
   createRow: <TData extends RowData>(
     row: Row<TData>,
-    table: Table<TData>
+    table: Table<TData>,
   ): void => {
     row._getAllVisibleCells = memo(
       () => [row.getAllCells(), table.getState().columnVisibility],
-      cells => {
-        return cells.filter(cell => cell.column.getIsVisible())
+      (cells) => {
+        return cells.filter((cell) => cell.column.getIsVisible())
       },
       {
         key: process.env.NODE_ENV === 'production' && 'row._getAllVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
     row.getVisibleCells = memo(
       () => [
@@ -214,64 +214,64 @@ export const Visibility: TableFeature = {
       {
         key: process.env.NODE_ENV === 'development' && 'row.getVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
-      }
+      },
     )
   },
 
   createTable: <TData extends RowData>(table: Table<TData>): void => {
     const makeVisibleColumnsMethod = (
       key: string,
-      getColumns: () => Column<TData, unknown>[]
+      getColumns: () => Column<TData, unknown>[],
     ): (() => Column<TData, unknown>[]) => {
       return memo(
         () => [
           getColumns(),
           getColumns()
-            .filter(d => d.getIsVisible())
-            .map(d => d.id)
+            .filter((d) => d.getIsVisible())
+            .map((d) => d.id)
             .join('_'),
         ],
-        columns => {
-          return columns.filter(d => d.getIsVisible?.())
+        (columns) => {
+          return columns.filter((d) => d.getIsVisible?.())
         },
         {
           key,
           debug: () => table.options.debugAll ?? table.options.debugColumns,
-        }
+        },
       )
     }
 
     table.getVisibleFlatColumns = makeVisibleColumnsMethod(
       'getVisibleFlatColumns',
-      () => table.getAllFlatColumns()
+      () => table.getAllFlatColumns(),
     )
     table.getVisibleLeafColumns = makeVisibleColumnsMethod(
       'getVisibleLeafColumns',
-      () => table.getAllLeafColumns()
+      () => table.getAllLeafColumns(),
     )
     table.getLeftVisibleLeafColumns = makeVisibleColumnsMethod(
       'getLeftVisibleLeafColumns',
-      () => table.getLeftLeafColumns()
+      () => table.getLeftLeafColumns(),
     )
     table.getRightVisibleLeafColumns = makeVisibleColumnsMethod(
       'getRightVisibleLeafColumns',
-      () => table.getRightLeafColumns()
+      () => table.getRightLeafColumns(),
     )
     table.getCenterVisibleLeafColumns = makeVisibleColumnsMethod(
       'getCenterVisibleLeafColumns',
-      () => table.getCenterLeafColumns()
+      () => table.getCenterLeafColumns(),
     )
 
-    table.setColumnVisibility = updater =>
+    table.setColumnVisibility = (updater) =>
       table.options.onColumnVisibilityChange?.(updater)
 
-    table.resetColumnVisibility = defaultState => {
+    table.resetColumnVisibility = (defaultState) => {
       table.setColumnVisibility(
-        defaultState ? {} : table.initialState.columnVisibility ?? {}
+        defaultState ? {} : table.initialState.columnVisibility ?? {},
       )
     }
 
-    table.toggleAllColumnsVisible = value => {
+    table.toggleAllColumnsVisible = (value) => {
       value = value ?? !table.getIsAllColumnsVisible()
 
       table.setColumnVisibility(
@@ -280,21 +280,21 @@ export const Visibility: TableFeature = {
             ...obj,
             [column.id]: !value ? !column.getCanHide?.() : value,
           }),
-          {}
-        )
+          {},
+        ),
       )
     }
 
     table.getIsAllColumnsVisible = () =>
-      !table.getAllLeafColumns().some(column => !column.getIsVisible?.())
+      !table.getAllLeafColumns().some((column) => !column.getIsVisible?.())
 
     table.getIsSomeColumnsVisible = () =>
-      table.getAllLeafColumns().some(column => column.getIsVisible?.())
+      table.getAllLeafColumns().some((column) => column.getIsVisible?.())
 
     table.getToggleAllColumnsVisibilityHandler = () => {
       return (e: unknown) => {
         table.toggleAllColumnsVisible(
-          ((e as MouseEvent).target as HTMLInputElement)?.checked
+          ((e as MouseEvent).target as HTMLInputElement)?.checked,
         )
       }
     }
diff --git a/packages/table-core/src/filterFns.ts b/packages/table-core/src/filterFns.ts
index 757a163269..d7e5fe8f83 100644
--- a/packages/table-core/src/filterFns.ts
+++ b/packages/table-core/src/filterFns.ts
@@ -3,7 +3,7 @@ import { FilterFn } from './features/Filters'
 const includesString: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: string
+  filterValue: string,
 ) => {
   const search = filterValue.toLowerCase()
   return Boolean(
@@ -11,7 +11,7 @@ const includesString: FilterFn<any> = (
       .getValue<string | null>(columnId)
       ?.toString()
       ?.toLowerCase()
-      ?.includes(search)
+      ?.includes(search),
   )
 }
 
@@ -20,10 +20,10 @@ includesString.autoRemove = (val: any) => testFalsey(val)
 const includesStringSensitive: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: string
+  filterValue: string,
 ) => {
   return Boolean(
-    row.getValue<string | null>(columnId)?.toString()?.includes(filterValue)
+    row.getValue<string | null>(columnId)?.toString()?.includes(filterValue),
   )
 }
 
@@ -32,7 +32,7 @@ includesStringSensitive.autoRemove = (val: any) => testFalsey(val)
 const equalsString: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: string
+  filterValue: string,
 ) => {
   return (
     row.getValue<string | null>(columnId)?.toString()?.toLowerCase() ===
@@ -45,7 +45,7 @@ equalsString.autoRemove = (val: any) => testFalsey(val)
 const arrIncludes: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: unknown
+  filterValue: unknown,
 ) => {
   return row.getValue<unknown[]>(columnId)?.includes(filterValue)
 }
@@ -55,10 +55,10 @@ arrIncludes.autoRemove = (val: any) => testFalsey(val) || !val?.length
 const arrIncludesAll: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: unknown[]
+  filterValue: unknown[],
 ) => {
   return !filterValue.some(
-    val => !row.getValue<unknown[]>(columnId)?.includes(val)
+    (val) => !row.getValue<unknown[]>(columnId)?.includes(val),
   )
 }
 
@@ -67,10 +67,10 @@ arrIncludesAll.autoRemove = (val: any) => testFalsey(val) || !val?.length
 const arrIncludesSome: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: unknown[]
+  filterValue: unknown[],
 ) => {
   return filterValue.some(
-    val => row.getValue<unknown[]>(columnId)?.includes(val)
+    (val) => row.getValue<unknown[]>(columnId)?.includes(val),
   )
 }
 
@@ -85,7 +85,7 @@ equals.autoRemove = (val: any) => testFalsey(val)
 const weakEquals: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: unknown
+  filterValue: unknown,
 ) => {
   return row.getValue(columnId) == filterValue
 }
@@ -95,7 +95,7 @@ weakEquals.autoRemove = (val: any) => testFalsey(val)
 const inNumberRange: FilterFn<any> = (
   row,
   columnId: string,
-  filterValue: [number, number]
+  filterValue: [number, number],
 ) => {
   let [min, max] = filterValue
 
diff --git a/packages/table-core/src/sortingFns.ts b/packages/table-core/src/sortingFns.ts
index 5cb88dac5f..d932779198 100644
--- a/packages/table-core/src/sortingFns.ts
+++ b/packages/table-core/src/sortingFns.ts
@@ -5,14 +5,14 @@ export const reSplitAlphaNumeric = /([0-9]+)/gm
 const alphanumeric: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareAlphanumeric(
     toString(rowA.getValue(columnId)).toLowerCase(),
-    toString(rowB.getValue(columnId)).toLowerCase()
+    toString(rowB.getValue(columnId)).toLowerCase(),
   )
 }
 
 const alphanumericCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareAlphanumeric(
     toString(rowA.getValue(columnId)),
-    toString(rowB.getValue(columnId))
+    toString(rowB.getValue(columnId)),
   )
 }
 
@@ -21,7 +21,7 @@ const alphanumericCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
 const text: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareBasic(
     toString(rowA.getValue(columnId)).toLowerCase(),
-    toString(rowB.getValue(columnId)).toLowerCase()
+    toString(rowB.getValue(columnId)).toLowerCase(),
   )
 }
 
@@ -30,7 +30,7 @@ const text: SortingFn<any> = (rowA, rowB, columnId) => {
 const textCaseSensitive: SortingFn<any> = (rowA, rowB, columnId) => {
   return compareBasic(
     toString(rowA.getValue(columnId)),
-    toString(rowB.getValue(columnId))
+    toString(rowB.getValue(columnId)),
   )
 }
 
diff --git a/packages/table-core/src/types.ts b/packages/table-core/src/types.ts
index ba022c1ffb..57aa39d841 100644
--- a/packages/table-core/src/types.ts
+++ b/packages/table-core/src/types.ts
@@ -189,7 +189,7 @@ export interface RowModel<TData extends RowData> {
 
 export type AccessorFn<TData extends RowData, TValue = unknown> = (
   originalRow: TData,
-  index: number
+  index: number,
 ) => TValue
 
 export type ColumnDefTemplate<TProps extends object> =
diff --git a/packages/table-core/src/utils.ts b/packages/table-core/src/utils.ts
index e59bee8201..6198957325 100755
--- a/packages/table-core/src/utils.ts
+++ b/packages/table-core/src/utils.ts
@@ -91,7 +91,7 @@ export function noop() {
 
 export function makeStateUpdater<K extends keyof TableState>(
   key: K,
-  instance: unknown
+  instance: unknown,
 ) {
   return (updater: Updater<TableState[K]>) => {
     ;(instance as any).setState(<TTableState>(old: TTableState) => {
@@ -110,17 +110,17 @@ export function isFunction<T extends AnyFunction>(d: any): d is T {
 }
 
 export function isNumberArray(d: any): d is number[] {
-  return Array.isArray(d) && d.every(val => typeof val === 'number')
+  return Array.isArray(d) && d.every((val) => typeof val === 'number')
 }
 
 export function flattenBy<TNode>(
   arr: TNode[],
-  getChildren: (item: TNode) => TNode[]
+  getChildren: (item: TNode) => TNode[],
 ) {
   const flat: TNode[] = []
 
   const recurse = (subArr: TNode[]) => {
-    subArr.forEach(item => {
+    subArr.forEach((item) => {
       flat.push(item)
       const children = getChildren(item)
       if (children?.length) {
@@ -141,7 +141,7 @@ export function memo<TDeps extends readonly any[], TResult>(
     key: any
     debug?: () => any
     onChange?: (result: TResult) => void
-  }
+  },
 ): () => TResult {
   let deps: any[] = []
   let result: TResult | undefined
@@ -189,9 +189,9 @@ export function memo<TDeps extends readonly any[], TResult>(
             font-weight: bold;
             color: hsl(${Math.max(
               0,
-              Math.min(120 - 120 * resultFpsPercentage, 120)
+              Math.min(120 - 120 * resultFpsPercentage, 120),
             )}deg 100% 31%);`,
-          opts?.key
+          opts?.key,
         )
       }
     }
diff --git a/packages/table-core/src/utils/filterRowsUtils.ts b/packages/table-core/src/utils/filterRowsUtils.ts
index 8e0bf25e40..3b603ab0d0 100644
--- a/packages/table-core/src/utils/filterRowsUtils.ts
+++ b/packages/table-core/src/utils/filterRowsUtils.ts
@@ -4,7 +4,7 @@ import { Row, RowModel, Table, RowData } from '../types'
 export function filterRows<TData extends RowData>(
   rows: Row<TData>[],
   filterRowImpl: (row: Row<TData>) => any,
-  table: Table<TData>
+  table: Table<TData>,
 ) {
   if (table.options.filterFromLeafRows) {
     return filterRowModelFromLeafs(rows, filterRowImpl, table)
@@ -16,7 +16,7 @@ export function filterRows<TData extends RowData>(
 export function filterRowModelFromLeafs<TData extends RowData>(
   rowsToFilter: Row<TData>[],
   filterRow: (row: Row<TData>) => Row<TData>[],
-  table: Table<TData>
+  table: Table<TData>,
 ): RowModel<TData> {
   const newFilteredFlatRows: Row<TData>[] = []
   const newFilteredRowsById: Record<string, Row<TData>> = {}
@@ -36,7 +36,7 @@ export function filterRowModelFromLeafs<TData extends RowData>(
         row.index,
         row.depth,
         undefined,
-        row.parentId
+        row.parentId,
       )
       newRow.columnFilters = row.columnFilters
 
@@ -80,7 +80,7 @@ export function filterRowModelFromLeafs<TData extends RowData>(
 export function filterRowModelFromRoot<TData extends RowData>(
   rowsToFilter: Row<TData>[],
   filterRow: (row: Row<TData>) => any,
-  table: Table<TData>
+  table: Table<TData>,
 ): RowModel<TData> {
   const newFilteredFlatRows: Row<TData>[] = []
   const newFilteredRowsById: Record<string, Row<TData>> = {}
@@ -107,7 +107,7 @@ export function filterRowModelFromRoot<TData extends RowData>(
             row.index,
             row.depth,
             undefined,
-            row.parentId
+            row.parentId,
           )
           newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
           row = newRow
diff --git a/packages/table-core/src/utils/getCoreRowModel.ts b/packages/table-core/src/utils/getCoreRowModel.ts
index a503c41490..082dd95ed2 100644
--- a/packages/table-core/src/utils/getCoreRowModel.ts
+++ b/packages/table-core/src/utils/getCoreRowModel.ts
@@ -3,13 +3,13 @@ import { Table, Row, RowModel, RowData } from '../types'
 import { memo } from '../utils'
 
 export function getCoreRowModel<TData extends RowData>(): (
-  table: Table<TData>
+  table: Table<TData>,
 ) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [table.options.data],
       (
-        data
+        data,
       ): {
         rows: Row<TData>[]
         flatRows: Row<TData>[]
@@ -24,7 +24,7 @@ export function getCoreRowModel<TData extends RowData>(): (
         const accessRows = (
           originalRows: TData[],
           depth = 0,
-          parentRow?: Row<TData>
+          parentRow?: Row<TData>,
         ): Row<TData>[] => {
           const rows = [] as Row<TData>[]
 
@@ -44,7 +44,7 @@ export function getCoreRowModel<TData extends RowData>(): (
               i,
               depth,
               undefined,
-              parentRow?.id
+              parentRow?.id,
             )
 
             // Keep track of every row in a flat array
@@ -58,7 +58,7 @@ export function getCoreRowModel<TData extends RowData>(): (
             if (table.options.getSubRows) {
               row.originalSubRows = table.options.getSubRows(
                 originalRows[i]!,
-                i
+                i,
               )
 
               // Then recursively access them
@@ -81,6 +81,6 @@ export function getCoreRowModel<TData extends RowData>(): (
         onChange: () => {
           table._autoResetPageIndex()
         },
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getExpandedRowModel.ts b/packages/table-core/src/utils/getExpandedRowModel.ts
index c93ad12e2f..dad1079bbd 100644
--- a/packages/table-core/src/utils/getExpandedRowModel.ts
+++ b/packages/table-core/src/utils/getExpandedRowModel.ts
@@ -2,9 +2,9 @@ import { Table, Row, RowModel, RowData } from '../types'
 import { memo } from '../utils'
 
 export function getExpandedRowModel<TData extends RowData>(): (
-  table: Table<TData>
+  table: Table<TData>,
 ) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [
         table.getState().expanded,
@@ -29,7 +29,7 @@ export function getExpandedRowModel<TData extends RowData>(): (
       {
         key: process.env.NODE_ENV === 'development' && 'getExpandedRowModel',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 }
 
diff --git a/packages/table-core/src/utils/getFacetedMinMaxValues.ts b/packages/table-core/src/utils/getFacetedMinMaxValues.ts
index 46da751345..4535116daa 100644
--- a/packages/table-core/src/utils/getFacetedMinMaxValues.ts
+++ b/packages/table-core/src/utils/getFacetedMinMaxValues.ts
@@ -3,12 +3,12 @@ import { memo } from '../utils'
 
 export function getFacetedMinMaxValues<TData extends RowData>(): (
   table: Table<TData>,
-  columnId: string
+  columnId: string,
 ) => () => undefined | [number, number] {
   return (table, columnId) =>
     memo(
       () => [table.getColumn(columnId)?.getFacetedRowModel()],
-      facetedRowModel => {
+      (facetedRowModel) => {
         if (!facetedRowModel) return undefined
 
         const firstValue =
@@ -43,6 +43,6 @@ export function getFacetedMinMaxValues<TData extends RowData>(): (
           'getFacetedMinMaxValues_' + columnId,
         debug: () => table.options.debugAll ?? table.options.debugTable,
         onChange: () => {},
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getFacetedRowModel.ts b/packages/table-core/src/utils/getFacetedRowModel.ts
index 77704fc7f6..f356bc42e1 100644
--- a/packages/table-core/src/utils/getFacetedRowModel.ts
+++ b/packages/table-core/src/utils/getFacetedRowModel.ts
@@ -4,7 +4,7 @@ import { filterRows } from './filterRowsUtils'
 
 export function getFacetedRowModel<TData extends RowData>(): (
   table: Table<TData>,
-  columnId: string
+  columnId: string,
 ) => () => RowModel<TData> {
   return (table, columnId) =>
     memo(
@@ -23,7 +23,7 @@ export function getFacetedRowModel<TData extends RowData>(): (
         }
 
         const filterableIds = [
-          ...columnFilters.map(d => d.id).filter(d => d !== columnId),
+          ...columnFilters.map((d) => d.id).filter((d) => d !== columnId),
           globalFilter ? '__global__' : undefined,
         ].filter(Boolean) as string[]
 
@@ -45,6 +45,6 @@ export function getFacetedRowModel<TData extends RowData>(): (
           'getFacetedRowModel_' + columnId,
         debug: () => table.options.debugAll ?? table.options.debugTable,
         onChange: () => {},
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getFacetedUniqueValues.ts b/packages/table-core/src/utils/getFacetedUniqueValues.ts
index e7d57bfc84..5a0d3ea031 100644
--- a/packages/table-core/src/utils/getFacetedUniqueValues.ts
+++ b/packages/table-core/src/utils/getFacetedUniqueValues.ts
@@ -3,12 +3,12 @@ import { memo } from '../utils'
 
 export function getFacetedUniqueValues<TData extends RowData>(): (
   table: Table<TData>,
-  columnId: string
+  columnId: string,
 ) => () => Map<any, number> {
   return (table, columnId) =>
     memo(
       () => [table.getColumn(columnId)?.getFacetedRowModel()],
-      facetedRowModel => {
+      (facetedRowModel) => {
         if (!facetedRowModel) return new Map()
 
         let facetedUniqueValues = new Map<any, number>()
@@ -23,7 +23,7 @@ export function getFacetedUniqueValues<TData extends RowData>(): (
             if (facetedUniqueValues.has(value)) {
               facetedUniqueValues.set(
                 value,
-                (facetedUniqueValues.get(value) ?? 0) + 1
+                (facetedUniqueValues.get(value) ?? 0) + 1,
               )
             } else {
               facetedUniqueValues.set(value, 1)
@@ -39,6 +39,6 @@ export function getFacetedUniqueValues<TData extends RowData>(): (
           'getFacetedUniqueValues_' + columnId,
         debug: () => table.options.debugAll ?? table.options.debugTable,
         onChange: () => {},
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getFilteredRowModel.ts b/packages/table-core/src/utils/getFilteredRowModel.ts
index a77062f400..b207e917ff 100644
--- a/packages/table-core/src/utils/getFilteredRowModel.ts
+++ b/packages/table-core/src/utils/getFilteredRowModel.ts
@@ -4,9 +4,9 @@ import { memo } from '../utils'
 import { filterRows } from './filterRowsUtils'
 
 export function getFilteredRowModel<TData extends RowData>(): (
-  table: Table<TData>
+  table: Table<TData>,
 ) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [
         table.getPreFilteredRowModel(),
@@ -28,7 +28,7 @@ export function getFilteredRowModel<TData extends RowData>(): (
         const resolvedColumnFilters: ResolvedColumnFilter<TData>[] = []
         const resolvedGlobalFilters: ResolvedColumnFilter<TData>[] = []
 
-        ;(columnFilters ?? []).forEach(d => {
+        ;(columnFilters ?? []).forEach((d) => {
           const column = table.getColumn(d.id)
 
           if (!column) {
@@ -40,7 +40,7 @@ export function getFilteredRowModel<TData extends RowData>(): (
           if (!filterFn) {
             if (process.env.NODE_ENV !== 'production') {
               console.warn(
-                `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`
+                `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`,
               )
             }
             return
@@ -53,13 +53,13 @@ export function getFilteredRowModel<TData extends RowData>(): (
           })
         })
 
-        const filterableIds = columnFilters.map(d => d.id)
+        const filterableIds = columnFilters.map((d) => d.id)
 
         const globalFilterFn = table.getGlobalFilterFn()
 
         const globallyFilterableColumns = table
           .getAllLeafColumns()
-          .filter(column => column.getCanGlobalFilter())
+          .filter((column) => column.getCanGlobalFilter())
 
         if (
           globalFilter &&
@@ -68,7 +68,7 @@ export function getFilteredRowModel<TData extends RowData>(): (
         ) {
           filterableIds.push('__global__')
 
-          globallyFilterableColumns.forEach(column => {
+          globallyFilterableColumns.forEach((column) => {
             resolvedGlobalFilters.push({
               id: column.id,
               filterFn: globalFilterFn,
@@ -98,9 +98,9 @@ export function getFilteredRowModel<TData extends RowData>(): (
                 row,
                 id,
                 currentColumnFilter.resolvedValue,
-                filterMeta => {
+                (filterMeta) => {
                   row.columnFiltersMeta[id] = filterMeta
-                }
+                },
               )
             }
           }
@@ -115,9 +115,9 @@ export function getFilteredRowModel<TData extends RowData>(): (
                   row,
                   id,
                   currentGlobalFilter.resolvedValue,
-                  filterMeta => {
+                  (filterMeta) => {
                     row.columnFiltersMeta[id] = filterMeta
-                  }
+                  },
                 )
               ) {
                 row.columnFilters.__global__ = true
@@ -150,6 +150,6 @@ export function getFilteredRowModel<TData extends RowData>(): (
         onChange: () => {
           table._autoResetPageIndex()
         },
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getGroupedRowModel.ts b/packages/table-core/src/utils/getGroupedRowModel.ts
index 6736bfefcd..d045b3dc43 100644
--- a/packages/table-core/src/utils/getGroupedRowModel.ts
+++ b/packages/table-core/src/utils/getGroupedRowModel.ts
@@ -3,9 +3,9 @@ import { Table, Row, RowModel, RowData } from '../types'
 import { flattenBy, memo } from '../utils'
 
 export function getGroupedRowModel<TData extends RowData>(): (
-  table: Table<TData>
+  table: Table<TData>,
 ) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [table.getState().grouping, table.getPreGroupedRowModel()],
       (grouping, rowModel) => {
@@ -14,8 +14,8 @@ export function getGroupedRowModel<TData extends RowData>(): (
         }
 
         // Filter the grouping list down to columns that exist
-        const existingGrouping = grouping.filter(columnId =>
-          table.getColumn(columnId)
+        const existingGrouping = grouping.filter((columnId) =>
+          table.getColumn(columnId),
         )
 
         const groupedFlatRows: Row<TData>[] = []
@@ -29,12 +29,12 @@ export function getGroupedRowModel<TData extends RowData>(): (
         const groupUpRecursively = (
           rows: Row<TData>[],
           depth = 0,
-          parentId?: string
+          parentId?: string,
         ) => {
           // Grouping depth has been been met
           // Stop grouping and simply rewrite thd depth and row relationships
           if (depth >= existingGrouping.length) {
-            return rows.map(row => {
+            return rows.map((row) => {
               row.depth = depth
 
               groupedFlatRows.push(row)
@@ -64,7 +64,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
 
               // Flatten the leaf rows of the rows in this group
               const leafRows = depth
-                ? flattenBy(groupedRows, row => row.subRows)
+                ? flattenBy(groupedRows, (row) => row.subRows)
                 : groupedRows
 
               const row = createRow(
@@ -74,7 +74,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
                 index,
                 depth,
                 undefined,
-                parentId
+                parentId,
               )
 
               Object.assign(row, {
@@ -109,7 +109,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
                     row._groupingValuesCache[columnId] = aggregateFn(
                       columnId,
                       leafRows,
-                      groupedRows
+                      groupedRows,
                     )
 
                     return row._groupingValuesCache[columnId]
@@ -117,7 +117,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
                 },
               })
 
-              subRows.forEach(subRow => {
+              subRows.forEach((subRow) => {
                 groupedFlatRows.push(subRow)
                 groupedRowsById[subRow.id] = subRow
                 // if (subRow.getIsGrouped?.()) {
@@ -130,7 +130,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
               })
 
               return row
-            }
+            },
           )
 
           return aggregatedGroupedRows
@@ -138,7 +138,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
 
         const groupedRows = groupUpRecursively(rowModel.rows, 0)
 
-        groupedRows.forEach(subRow => {
+        groupedRows.forEach((subRow) => {
           groupedFlatRows.push(subRow)
           groupedRowsById[subRow.id] = subRow
           // if (subRow.getIsGrouped?.()) {
@@ -165,7 +165,7 @@ export function getGroupedRowModel<TData extends RowData>(): (
             table._autoResetPageIndex()
           })
         },
-      }
+      },
     )
 }
 
diff --git a/packages/table-core/src/utils/getPaginationRowModel.ts b/packages/table-core/src/utils/getPaginationRowModel.ts
index ca998025ef..85af42e12e 100644
--- a/packages/table-core/src/utils/getPaginationRowModel.ts
+++ b/packages/table-core/src/utils/getPaginationRowModel.ts
@@ -5,7 +5,7 @@ import { expandRows } from './getExpandedRowModel'
 export function getPaginationRowModel<TData extends RowData>(opts?: {
   initialSync: boolean
 }): (table: Table<TData>) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [
         table.getState().pagination,
@@ -58,6 +58,6 @@ export function getPaginationRowModel<TData extends RowData>(opts?: {
       {
         key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel',
         debug: () => table.options.debugAll ?? table.options.debugTable,
-      }
+      },
     )
 }
diff --git a/packages/table-core/src/utils/getSortedRowModel.ts b/packages/table-core/src/utils/getSortedRowModel.ts
index eab697e26f..f80e4b3ee9 100644
--- a/packages/table-core/src/utils/getSortedRowModel.ts
+++ b/packages/table-core/src/utils/getSortedRowModel.ts
@@ -3,9 +3,9 @@ import { SortingFn } from '../features/Sorting'
 import { memo } from '../utils'
 
 export function getSortedRowModel<TData extends RowData>(): (
-  table: Table<TData>
+  table: Table<TData>,
 ) => () => RowModel<TData> {
-  return table =>
+  return (table) =>
     memo(
       () => [table.getState().sorting, table.getPreSortedRowModel()],
       (sorting, rowModel) => {
@@ -19,7 +19,7 @@ export function getSortedRowModel<TData extends RowData>(): (
 
         // Filter out sortings that correspond to non existing columns
         const availableSorting = sortingState.filter(
-          sort => table.getColumn(sort.id)?.getCanSort()
+          (sort) => table.getColumn(sort.id)?.getCanSort(),
         )
 
         const columnInfoById: Record<
@@ -31,7 +31,7 @@ export function getSortedRowModel<TData extends RowData>(): (
           }
         > = {}
 
-        availableSorting.forEach(sortEntry => {
+        availableSorting.forEach((sortEntry) => {
           const column = table.getColumn(sortEntry.id)
           if (!column) return
 
@@ -45,7 +45,7 @@ export function getSortedRowModel<TData extends RowData>(): (
         const sortData = (rows: Row<TData>[]) => {
           // This will also perform a stable sorting using the row index
           // if needed.
-          const sortedData = rows.map(row => ({ ...row }))
+          const sortedData = rows.map((row) => ({ ...row }))
 
           sortedData.sort((rowA, rowB) => {
             for (let i = 0; i < availableSorting.length; i += 1) {
@@ -95,7 +95,7 @@ export function getSortedRowModel<TData extends RowData>(): (
           })
 
           // If there are sub-rows, sort them
-          sortedData.forEach(row => {
+          sortedData.forEach((row) => {
             sortedFlatRows.push(row)
             if (row.subRows?.length) {
               row.subRows = sortData(row.subRows)
@@ -117,6 +117,6 @@ export function getSortedRowModel<TData extends RowData>(): (
         onChange: () => {
           table._autoResetPageIndex()
         },
-      }
+      },
     )
 }
diff --git a/packages/vue-table/rollup.config.mjs b/packages/vue-table/rollup.config.mjs
index d9685568cb..309729e056 100644
--- a/packages/vue-table/rollup.config.mjs
+++ b/packages/vue-table/rollup.config.mjs
@@ -13,5 +13,5 @@ export default defineConfig(
     globals: {
       vue: 'Vue',
     },
-  })
+  }),
 )
diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts
index 5b342de11b..698aa9eb3d 100755
--- a/packages/vue-table/src/index.ts
+++ b/packages/vue-table/src/index.ts
@@ -26,7 +26,7 @@ export const FlexRender = defineComponent({
 })
 
 export function useVueTable<TData extends RowData>(
-  options: TableOptions<TData>
+  options: TableOptions<TData>,
 ) {
   const resolvedOptions: TableOptionsResolved<TData> = mergeProxy(
     {
@@ -35,12 +35,12 @@ export function useVueTable<TData extends RowData>(
       renderFallbackValue: null,
       mergeOptions(
         defaultOptions: TableOptions<TData>,
-        options: TableOptions<TData>
+        options: TableOptions<TData>,
       ) {
         return mergeProxy(defaultOptions, options)
       },
     },
-    options
+    options,
   )
 
   const table = createTable<TData>(resolvedOptions)
@@ -48,7 +48,7 @@ export function useVueTable<TData extends RowData>(
   const state = ref(table.initialState)
 
   watchEffect(() => {
-    table.setOptions(prev => {
+    table.setOptions((prev) => {
       const stateProxy = new Proxy({} as typeof state.value, {
         get: (_, prop) => state.value[prop as keyof typeof state.value],
       })
diff --git a/packages/vue-table/src/merge-proxy.ts b/packages/vue-table/src/merge-proxy.ts
index b12cb35106..2dc0af0753 100644
--- a/packages/vue-table/src/merge-proxy.ts
+++ b/packages/vue-table/src/merge-proxy.ts
@@ -40,7 +40,7 @@ type BoxedTupleTypes<T extends any[]> = {
   [P in keyof T]: [UnboxLazy<T[P]>]
 }[Exclude<keyof T, keyof any[]>]
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
-  k: infer I
+  k: infer I,
 ) => void
   ? I
   : never
@@ -76,6 +76,6 @@ export function mergeProxy(...sources: any): any {
         return [...Array.from(new Set(keys))]
       },
     },
-    propTraps
+    propTraps,
   )
 }
diff --git a/prettier.config.cjs b/prettier.config.cjs
deleted file mode 100644
index 383f5b5e35..0000000000
--- a/prettier.config.cjs
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'es5',
-  bracketSpacing: true,
-  arrowParens: 'avoid',
-  endOfLine: 'auto',
-  plugins: ['prettier-plugin-svelte'],
-  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
-}
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000000..dbb08b1110
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,12 @@
+// @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  plugins: ['prettier-plugin-svelte'],
+  overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
+}
+
+export default config
diff --git a/scripts/getRollupConfig.js b/scripts/getRollupConfig.js
index f79fdbd7a7..f125f92ac2 100644
--- a/scripts/getRollupConfig.js
+++ b/scripts/getRollupConfig.js
@@ -12,7 +12,7 @@ import svelte from 'rollup-plugin-svelte'
 import { rootDir } from './config.js'
 
 /** @param {'development' | 'production'} type */
-const forceEnvPlugin = type =>
+const forceEnvPlugin = (type) =>
   replace({
     'process.env.NODE_ENV': `"${type}"`,
     delimiters: ['', ''],
@@ -40,7 +40,7 @@ export function buildConfigs(opts) {
   const input = resolve(opts.entryFile)
 
   /** @param {string} moduleName */
-  const external = moduleName => opts.external.includes(moduleName)
+  const external = (moduleName) => opts.external.includes(moduleName)
   const umdExternal = Object.keys(opts.globals)
   const banner = createBanner(opts.name)
 
diff --git a/scripts/publish.js b/scripts/publish.js
index 9907b0bcc1..c1c5a2d880 100644
--- a/scripts/publish.js
+++ b/scripts/publish.js
@@ -15,7 +15,7 @@ import { DateTime } from 'luxon'
 import { branchConfigs, packages, rootDir } from './config.js'
 
 /** @param {string} version */
-const releaseCommitMsg = version => `release: v${version}`
+const releaseCommitMsg = (version) => `release: v${version}`
 
 async function run() {
   const branchName = /** @type {string} */ (
@@ -34,8 +34,8 @@ async function run() {
 
   // Filter tags to our branch/pre-release combo
   tags = tags
-    .filter(tag => semver.valid(tag))
-    .filter(tag => {
+    .filter((tag) => semver.valid(tag))
+    .filter((tag) => {
       // If this is an older release, filter to only include that version
       if (isPreviousRelease) {
         return tag.startsWith(branchName)
@@ -63,13 +63,13 @@ async function run() {
     if (process.env.TAG) {
       if (!process.env.TAG.startsWith('v')) {
         throw new Error(
-          `process.env.TAG must start with "v", eg. v0.0.0. You supplied ${process.env.TAG}`
+          `process.env.TAG must start with "v", eg. v0.0.0. You supplied ${process.env.TAG}`,
         )
       }
       console.info(
         chalk.yellow(
-          `Tag is set to ${process.env.TAG}. This will force release all packages. Publishing...`
-        )
+          `Tag is set to ${process.env.TAG}. This will force release all packages. Publishing...`,
+        ),
       )
       RELEASE_ALL = true
 
@@ -80,7 +80,7 @@ async function run() {
       }
     } else {
       throw new Error(
-        'Could not find latest tag! To make a release tag of v0.0.1, run with TAG=v0.0.1'
+        'Could not find latest tag! To make a release tag of v0.0.1, run with TAG=v0.0.1',
       )
     }
   }
@@ -102,12 +102,12 @@ async function run() {
         if (err) return reject(err)
 
         Promise.all(
-          arr.map(async d => {
+          arr.map(async (d) => {
             const parsed = await parseCommit(d.subject)
 
             return { ...d, parsed }
-          })
-        ).then(res => resolve(res.filter(Boolean)))
+          }),
+        ).then((res) => resolve(res.filter(Boolean)))
       })
     })
   ).filter((/** @type {import('./types.js').Commit} */ commit) => {
@@ -120,7 +120,7 @@ async function run() {
   })
 
   console.info(
-    `Parsing ${commitsSinceLatestTag.length} commits since ${latestTag}...`
+    `Parsing ${commitsSinceLatestTag.length} commits since ${latestTag}...`,
   )
 
   /**
@@ -153,7 +153,7 @@ async function run() {
 
       return releaseLevel
     },
-    -1
+    -1,
   )
 
   /**
@@ -170,11 +170,11 @@ async function run() {
   /** Uses packages and changedFiles to determine which packages have changed */
   const changedPackages = RELEASE_ALL
     ? packages
-    : packages.filter(pkg => {
+    : packages.filter((pkg) => {
         const changed = changedFiles.some(
-          file =>
+          (file) =>
             file.startsWith(path.join(pkg.packageDir, 'src')) ||
-            file.startsWith(path.join(pkg.packageDir, 'package.json'))
+            file.startsWith(path.join(pkg.packageDir, 'package.json')),
         )
         return changed
       })
@@ -186,26 +186,26 @@ async function run() {
   for (let runs = 0; runs < 3; runs++) {
     for (const pkg of packages) {
       const packageJson = await readPackageJson(
-        path.resolve(rootDir, pkg.packageDir, 'package.json')
+        path.resolve(rootDir, pkg.packageDir, 'package.json'),
       )
       const allDependencies = Object.keys(
         Object.assign(
           {},
           packageJson.dependencies ?? {},
-          packageJson.peerDependencies ?? {}
-        )
+          packageJson.peerDependencies ?? {},
+        ),
       )
 
       if (
-        allDependencies.find(dep =>
-          changedPackages.find(d => d.name === dep)
+        allDependencies.find((dep) =>
+          changedPackages.find((d) => d.name === dep),
         ) &&
-        !changedPackages.find(d => d.name === pkg.name)
+        !changedPackages.find((d) => d.name === pkg.name)
       ) {
         console.info(
           'adding package dependency',
           pkg.name,
-          'to changed packages'
+          'to changed packages',
         )
         changedPackages.push(pkg)
       }
@@ -215,14 +215,14 @@ async function run() {
   if (!process.env.TAG) {
     if (recommendedReleaseLevel === 2) {
       console.info(
-        `Major versions releases must be tagged and released manually.`
+        `Major versions releases must be tagged and released manually.`,
       )
       return
     }
 
     if (recommendedReleaseLevel === -1) {
       console.info(
-        `There have been no changes since the release of ${latestTag} that require a new version. You're good!`
+        `There have been no changes since the release of ${latestTag} that require a new version. You're good!`,
       )
       return
     }
@@ -239,7 +239,7 @@ async function run() {
               ...acc,
               [type]: [...(acc[type] || []), next],
             }
-          }, /** @type {Record<string, import('./types.js').Commit[]>} */ ({}))
+          }, /** @type {Record<string, import('./types.js').Commit[]>} */ ({})),
         )
           .sort(
             getSorterFn([
@@ -254,12 +254,12 @@ async function run() {
                   'fix',
                   'feat',
                 ].indexOf(d),
-            ])
+            ]),
           )
           .reverse()
           .map(async ([type, commits]) => {
             return Promise.all(
-              commits.map(async commit => {
+              commits.map(async (commit) => {
                 let username = ''
 
                 if (process.env.GH_TOKEN) {
@@ -276,7 +276,7 @@ async function run() {
                       headers: {
                         Authorization: `token ${process.env.GH_TOKEN}`,
                       },
-                    }
+                    },
                   )
 
                   username = res.data.items[0]?.login
@@ -292,10 +292,10 @@ async function run() {
                     ? `by @${username}`
                     : `by ${commit.author.name || commit.author.email}`
                 }`
-              })
-            ).then(c => /** @type {const} */ ([type, c]))
-          })
-      ).then(groups => {
+              }),
+            ).then((c) => /** @type {const} */ ([type, c]))
+          }),
+      ).then((groups) => {
         return groups
           .map(([type, commits]) => {
             return [`### ${capitalize(type)}`, commits.join('\n')].join('\n\n')
@@ -333,18 +333,18 @@ async function run() {
         latestTag,
         recommendedReleaseLevel,
         branchConfig.prerelease,
-      ].join(', ')}`
+      ].join(', ')}`,
     )
   }
 
   const changelogMd = [
     `Version ${version} - ${DateTime.now().toLocaleString(
-      DateTime.DATETIME_SHORT
+      DateTime.DATETIME_SHORT,
     )}`,
     `## Changes`,
     changelogCommitsMd,
     `## Packages`,
-    changedPackages.map(d => `- ${d.name}@${version}`).join('\n'),
+    changedPackages.map((d) => `- ${d.name}@${version}`).join('\n'),
   ].join('\n\n')
 
   console.info('Generating changelog...')
@@ -364,15 +364,15 @@ async function run() {
 
     await updatePackageJson(
       path.resolve(rootDir, pkg.packageDir, 'package.json'),
-      config => {
+      (config) => {
         config.version = version
-      }
+      },
     )
   }
 
   if (!process.env.CI) {
     console.warn(
-      `This is a dry run for version ${version}. Push to CI to publish for real or set CI=true to override!`
+      `This is a dry run for version ${version}. Push to CI to publish for real or set CI=true to override!`,
     )
     return
   }
@@ -381,7 +381,7 @@ async function run() {
   console.info(`Publishing all packages to npm`)
 
   // Publish each package
-  changedPackages.forEach(pkg => {
+  changedPackages.forEach((pkg) => {
     const packageDir = path.join(rootDir, pkg.packageDir)
     const tagParam = branchConfig.previousVersion ? `` : `--tag ${npmTag}`
 
@@ -417,14 +417,14 @@ async function run() {
   execSync(
     `gh release create v${version} ${
       branchConfig.prerelease ? '--prerelease' : ''
-    } --notes '${changelogMd.replace(/'/g, '"')}'`
+    } --notes '${changelogMd.replace(/'/g, '"')}'`,
   )
   console.info(`  Github release created.`)
 
   console.info(`All done!`)
 }
 
-run().catch(err => {
+run().catch((err) => {
   console.info(err)
   process.exit(1)
 })
@@ -463,7 +463,7 @@ function getSorterFn(sorters) {
   return (a, b) => {
     let i = 0
 
-    sorters.some(sorter => {
+    sorters.some((sorter) => {
       const sortedA = sorter(a)
       const sortedB = sorter(b)
       if (sortedA > sortedB) {
diff --git a/tsconfig.json b/tsconfig.json
index d91378beec..bc70ca4228 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
     "allowJs": true,
     "checkJs": true
   },
-  "include": ["prettier.config.cjs", "scripts"]
+  "include": ["prettier.config.js", "scripts"]
 }