fix: move async utils to experimental package

TanStack · May 10, 2022 · 0772943 · 0772943
1 parent d29449a
commit 0772943
Show file tree

Hide file tree

Showing 82 changed files with 3,153 additions and 1,063 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,23 +1,23 @@
-const { NODE_ENV, BABEL_ENV } = process.env;
-const cjs = NODE_ENV === "test" || BABEL_ENV === "commonjs";
-const loose = true;
+const { NODE_ENV, BABEL_ENV } = process.env
+const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
+const loose = true
 
 module.exports = {
   presets: [
     [
-      "@babel/env",
+      '@babel/env',
       {
         loose,
         modules: false,
         // exclude: ['@babel/plugin-transform-regenerator'],
       },
     ],
-    "@babel/react",
-    "@babel/preset-typescript",
+    '@babel/react',
+    '@babel/preset-typescript',
   ],
   plugins: [
-    // 'babel-plugin-transform-async-to-promises',
-    cjs && ["@babel/transform-modules-commonjs", { loose }],
+    'babel-plugin-transform-async-to-promises',
+    cjs && ['@babel/transform-modules-commonjs', { loose }],
     // [
     //   '@babel/transform-runtime',
     //   {
@@ -28,4 +28,4 @@ module.exports = {
     //   },
     // ],
   ].filter(Boolean),
-};
+}
diff --git a/docs/api/filters.md b/docs/api/filters.md
@@ -50,8 +50,7 @@ Filter state is stored on the table instance using the following shape:
 export type FiltersTableState = {
   columnFilters: ColumnFiltersState
   globalFilter: any
-  columnFiltersProgress: number
-  globalFilterProgress: number
+  filtersProgress: number
 }
 
 export type ColumnFiltersState = ColumnFilter[]

diff --git a/examples/basic/src/main.tsx b/examples/basic/src/main.tsx
@@ -5,7 +5,7 @@ import './index.css'
 
 import {
   createTable,
-  getCoreRowModelSync,
+  getCoreRowModel,
   useTableInstance,
 } from '@tanstack/react-table'
 
@@ -53,12 +53,12 @@ const defaultColumns = [
     footer: props => props.column.id,
     columns: [
       table.createDataColumn('firstName', {
-        cell: info => info.value,
+        cell: info => info.getValue(),
         footer: props => props.column.id,
       }),
       table.createDataColumn(row => row.lastName, {
         id: 'lastName',
-        cell: info => info.value,
+        cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: props => props.column.id,
       }),
@@ -104,7 +104,7 @@ function App() {
   const instance = useTableInstance(table, {
     data,
     columns,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
   })
 
   return (

diff --git a/examples/column-ordering/src/main.tsx b/examples/column-ordering/src/main.tsx
@@ -7,7 +7,7 @@ import './index.css'
 import {
   ColumnOrderState,
   createTable,
-  getCoreRowModelSync,
+  getCoreRowModel,
   useTableInstance,
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
@@ -20,12 +20,12 @@ const defaultColumns = [
     footer: props => props.column.id,
     columns: [
       table.createDataColumn('firstName', {
-        cell: info => info.value,
+        cell: info => info.getValue(),
         footer: props => props.column.id,
       }),
       table.createDataColumn(row => row.lastName, {
         id: 'lastName',
-        cell: info => info.value,
+        cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: props => props.column.id,
       }),
@@ -78,7 +78,7 @@ function App() {
     },
     onColumnVisibilityChange: setColumnVisibility,
     onColumnOrderChange: setColumnOrder,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

diff --git a/examples/column-ordering/src/makeData.ts b/examples/column-ordering/src/makeData.ts
@@ -29,13 +29,13 @@ const newPerson = (): Person => {
       'relationship',
       'complicated',
       'single',
-    ])[0],
+    ])[0]!,
   }
 }
 
 export function makeData(...lens: number[]) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
     return range(len).map((d): Person => {
       return {
         ...newPerson(),

diff --git a/examples/column-pinning/src/main.tsx b/examples/column-pinning/src/main.tsx
@@ -7,8 +7,7 @@ import './index.css'
 import {
   ColumnOrderState,
   createTable,
-  getCoreRowModelAsync,
-  getCoreRowModelSync,
+  getCoreRowModel,
   useTableInstance,
   VisibilityState,
 } from '@tanstack/react-table'
@@ -22,12 +21,12 @@ const defaultColumns = [
     footer: props => props.column.id,
     columns: [
       table.createDataColumn('firstName', {
-        cell: info => info.value,
+        cell: info => info.getValue(),
         footer: props => props.column.id,
       }),
       table.createDataColumn(row => row.lastName, {
         id: 'lastName',
-        cell: info => info.value,
+        cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: props => props.column.id,
       }),
@@ -85,7 +84,7 @@ function App() {
     onColumnVisibilityChange: setColumnVisibility,
     onColumnOrderChange: setColumnOrder,
     onColumnPinningChange: setColumnPinning,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

diff --git a/examples/column-pinning/src/makeData.ts b/examples/column-pinning/src/makeData.ts
@@ -29,13 +29,13 @@ const newPerson = (): Person => {
       'relationship',
       'complicated',
       'single',
-    ])[0],
+    ])[0]!,
   }
 }
 
 export function makeData(...lens: number[]) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
     return range(len).map((d): Person => {
       return {
         ...newPerson(),

diff --git a/examples/column-sizing/src/main.tsx b/examples/column-sizing/src/main.tsx
@@ -7,7 +7,7 @@ import {
   createTable,
   useTableInstance,
   ColumnResizeMode,
-  getCoreRowModelSync,
+  getCoreRowModel,
 } from '@tanstack/react-table'
 
 type Person = {
@@ -54,12 +54,12 @@ const defaultColumns = [
     footer: props => props.column.id,
     columns: [
       table.createDataColumn('firstName', {
-        cell: info => info.value,
+        cell: info => info.getValue(),
         footer: props => props.column.id,
       }),
       table.createDataColumn(row => row.lastName, {
         id: 'lastName',
-        cell: info => info.value,
+        cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: props => props.column.id,
       }),
@@ -109,7 +109,7 @@ function App() {
     data,
     columns,
     columnResizeMode,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

diff --git a/examples/column-visibility/src/main.tsx b/examples/column-visibility/src/main.tsx
@@ -5,7 +5,7 @@ import './index.css'
 
 import {
   createTable,
-  getCoreRowModelSync,
+  getCoreRowModel,
   useTableInstance,
 } from '@tanstack/react-table'
 
@@ -53,12 +53,12 @@ const defaultColumns = [
     footer: props => props.column.id,
     columns: [
       table.createDataColumn('firstName', {
-        cell: info => info.value,
+        cell: info => info.getValue(),
         footer: props => props.column.id,
       }),
       table.createDataColumn(row => row.lastName, {
         id: 'lastName',
-        cell: info => info.value,
+        cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
         footer: props => props.column.id,
       }),
@@ -109,7 +109,7 @@ function App() {
       columnVisibility,
     },
     onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

diff --git a/examples/editable-data/src/main.tsx b/examples/editable-data/src/main.tsx
@@ -11,8 +11,8 @@ import {
   TableInstance,
   ColumnDef,
   useTableInstance,
-  getCoreRowModelSync,
-  getFilteredRowModelSync,
+  getCoreRowModel,
+  getFilteredRowModel,
   getPaginationRowModel,
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
@@ -29,7 +29,8 @@ type MyTableGenerics = typeof table.generics
 
 // Give our default column cell renderer editing superpowers!
 const defaultColumn: Partial<ColumnDef<MyTableGenerics>> = {
-  cell: ({ value: initialValue, row: { index }, column: { id }, instance }) => {
+  cell: ({ getValue, row: { index }, column: { id }, instance }) => {
+    const initialValue = getValue()
     // We need to keep and update the state of the cell normally
     const [value, setValue] = React.useState(initialValue)
 
@@ -128,8 +129,8 @@ function App() {
     data,
     columns,
     defaultColumn,
-    getCoreRowModel: getCoreRowModelSync(),
-    getFilteredRowModel: getFilteredRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     autoResetPageIndex,
     // Provide our updateData function to our table meta
@@ -141,7 +142,7 @@ function App() {
           old.map((row, index) => {
             if (index === rowIndex) {
               return {
-                ...old[rowIndex],
+                ...old[rowIndex]!,
                 [columnId]: value,
               }
             }
@@ -273,8 +274,9 @@ function Filter({
   column: Column<any>
   instance: TableInstance<any>
 }) {
-  const firstValue =
-    instance.getPreFilteredRowModel().flatRows[0].values[column.id]
+  const firstValue = instance
+    .getPreFilteredRowModel()
+    .flatRows[0]?.getValue(column.id)
 
   const columnFilterValue = column.getFilterValue()
 

diff --git a/examples/editable-data/src/makeData.ts b/examples/editable-data/src/makeData.ts
@@ -29,13 +29,13 @@ const newPerson = (): Person => {
       'relationship',
       'complicated',
       'single',
-    ])[0],
+    ])[0]!,
   }
 }
 
 export function makeData(...lens: number[]) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
     return range(len).map((d): Person => {
       return {
         ...newPerson(),

diff --git a/examples/expanding/src/main.tsx b/examples/expanding/src/main.tsx
@@ -9,9 +9,9 @@ import {
   TableInstance,
   ExpandedState,
   useTableInstance,
-  getCoreRowModelSync,
+  getCoreRowModel,
   getPaginationRowModel,
-  getFilteredRowModelSync,
+  getFilteredRowModel,
   getExpandedRowModel,
 } from '@tanstack/react-table'
 import { makeData, Person } from './makeData'
@@ -47,7 +47,7 @@ function App() {
                 First Name
               </>
             ),
-            cell: ({ row, value }) => (
+            cell: ({ row, getValue }) => (
               <div
                 style={{
                   // Since rows are flattened by default,
@@ -76,14 +76,14 @@ function App() {
                 ) : (
                   '🔵'
                 )}{' '}
-                {value}
+                {getValue()}
               </div>
             ),
             footer: props => props.column.id,
           }),
           table.createDataColumn(row => row.lastName, {
             id: 'lastName',
-            cell: info => info.value,
+            cell: info => info.getValue(),
             header: () => <span>Last Name</span>,
             footer: props => props.column.id,
           }),
@@ -133,9 +133,9 @@ function App() {
     },
     onExpandedChange: setExpanded,
     getSubRows: row => row.subRows,
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModelSync(),
+    getFilteredRowModel: getFilteredRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     debugTable: true,
   })
@@ -262,8 +262,9 @@ function Filter({
   column: Column<any>
   instance: TableInstance<any>
 }) {
-  const firstValue =
-    instance.getPreFilteredRowModel().flatRows[0].values[column.id]
+  const firstValue = instance
+    .getPreFilteredRowModel()
+    .flatRows[0]?.getValue(column.id)
 
   const columnFilterValue = column.getFilterValue()
 

diff --git a/examples/expanding/src/makeData.ts b/examples/expanding/src/makeData.ts
@@ -29,13 +29,13 @@ const newPerson = (): Person => {
       'relationship',
       'complicated',
       'single',
-    ])[0],
+    ])[0]!,
   }
 }
 
 export function makeData(...lens: number[]) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
     return range(len).map((d): Person => {
       return {
         ...newPerson(),