v7.0.0-beta.1

Closes #1549

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,6 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-
 ---
 
 # Using v6?
@@ -10,13 +9,14 @@ v6 is now considered feature complete to its current abilities and limitations.
 
 # Using v7?
 
-Thanks for using the alpha version of React Table v7! We're very excited about it.
+Thanks for using the beta version of React Table v7! We're very excited about it.
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -32,15 +32,17 @@ Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to repr
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.0.0-beta.0
+
+- Massive changes to the entire project and library. Please consult the README and documentation for more information regarding these changes.
+
 ## 6.8.6
 
 #### Fixes & Optimizations

README.md

@@ -48,11 +48,11 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 
 #### What is the current state of React Table?
 
-React Table v7 is still under active development, and its API is still changing, albeit only slightly. For this reason, it is currently in an **alpha** release state. It's estimated that it will be out of alpha and into **beta** sometime during September 2019. It will then remain in beta for a short time before being released sometime in Q4 of 2019.
+React Table v7 is still under active development, and its API is still changing, albeit only slightly. For this reason, it is currently in an **beta** release state. It's estimated that it will be fully released as a stable version sometime during October 2019.
 
-#### Should I use v7@alpha in production?
+#### Should I use v7@beta in production?
 
-You can use it production as long as you lock in the alpha version in your package.json and also accept that the API will likely change before it's official release.
+You can use it production as long as you lock in the beta version in your package.json and also accept that there may be unlikely, but possible bug fixes and/or API changes before it's official release.
 
 #### I'm still using v6, what should I do?
 
@@ -93,7 +93,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
         </a>
       </td>
       <td align="center" valign="middle">
-        <a href="http://bjntech.com/index.html&utm_campaign=react_table" target="_blank">
+        <a href="http://bjntech.com/index.html?utm_campaign=react_table" target="_blank">
           <img width='250' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-bjn.png">
         </a>
       </td>

docs/api.md

@@ -427,7 +427,7 @@ The following options are supported on any `Column` object passed to the `column
 - `sortType: String | Function`
   - Used to compare 2 rows of data and order them correctly.
   - If a **function** is passed, it must be **memoized**
-  - String options: `basic`, `datettime`, `alphanumeric`. Defaults to [`alphanumeric`](TODO).
+  - String options: `basic`, `datetime`, `alphanumeric`. Defaults to [`alphanumeric`](TODO).
   - The resolved function from the this string/function will be used to sort the this column's data.
     - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used.
     - If a `function` is passed, it will be used.

docs/installation.md

@@ -10,7 +10,7 @@ $ npm install react-table@next
 $ yarn add react-table@next
 ```
 
-> NOTE: `@next` is only required tempororarily while work on the alpha and beta versions are still shifting.
+> NOTE: `@next` is only required temporarily while work on the alpha and beta versions are still shifting.
 
 To import React Table:
 

examples/editable-data/src/App.js

@@ -230,17 +230,17 @@ function App() {
 
   const [data, setData] = React.useState(() => makeData(20))
   const [originalData] = React.useState(data)
+  const [skipPageReset, setSkipPageReset] = React.useState(false)
 
   // We need to keep the table from resetting the pageIndex when we
   // Update data. So we can keep track of that flag with a ref.
-  const skipPageResetRef = React.useRef(false)
 
   // When our cell renderer calls updateMyData, we'll use
   // the rowIndex, columnID and new value to update the
   // original data
   const updateMyData = (rowIndex, columnID, value) => {
     // We also turn on the flag to not reset the page
-    skipPageResetRef.current = true
+    setSkipPageReset(true)
     setData(old =>
       old.map((row, index) => {
         if (index === rowIndex) {
@@ -258,7 +258,7 @@ function App() {
   // so that if data actually changes when we're not
   // editing it, the page is reset
   React.useEffect(() => {
-    skipPageResetRef.current = false
+    setSkipPageReset(false)
   }, [data])
 
   // Let's add a data resetter/randomizer to help
@@ -272,7 +272,7 @@ function App() {
         columns={columns}
         data={data}
         updateMyData={updateMyData}
-        disablePageResetOnDataChange={skipPageResetRef.current}
+        disablePageResetOnDataChange={skipPageReset}
       />
     </Styles>
   )

examples/kitchen-sink/src/App.js

@@ -304,8 +304,8 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
       disablePageResetOnDataChange,
     },
     useFilters,
-    useSortBy,
     useGroupBy,
+    useSortBy,
     useExpanded,
     usePagination,
     useRowSelect

examples/sorting/README.md

@@ -61,7 +61,7 @@ function MyTable() {
 ```
 
 By default, the sorting will be `alphanumeric`. This can be changed in your `column` object.
-Other options include `basic` and `datettime`.
+Other options include `basic` and `datetime`.
 Note that if you're planning on sorting numbers between 0 and 1, `basic` sorting will be more accurate.
 
 More information can be found in the [API Docs](/docs/api.md#useSortBy)

index.d.ts

@@ -0,0 +1,184 @@
+import { Dispatch, SetStateAction, ReactNode } from 'react';
+
+declare module 'react-table' {
+    export interface Cell<D> {
+        render: (type: string) => any;
+        getCellProps: () => any;
+        column: Column<D>;
+        row: Row<D>;
+        state: any;
+        value: any;
+    }
+
+    export interface Row<D> {
+        index: number;
+        cells: Cell<D>[];
+        getRowProps: () => any;
+        original: any;
+    }
+
+    export interface HeaderColumn<D, A extends keyof D = never> {
+        /**
+         * This string/function is used to build the data model for your column.
+         */
+        accessor: A | ((originalRow: D) => string);
+        Header?: string | ((props: TableInstance<D>) => ReactNode);
+        Filter?: string | ((props: TableInstance<D>) => ReactNode);
+        Cell?: string | ((cell: Cell<D>) => ReactNode);
+
+        /**
+         * This is the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc.
+         */
+        id?: string | number;
+        minWidth?: string | number;
+        maxWidth?: string | number;
+        width?: string | number;
+        canSortBy?: boolean;
+        sortByFn?: (a: any, b: any, desc: boolean) => 0 | 1 | -1;
+        defaultSortDesc?: boolean;
+    }
+
+    export interface Column<D, A extends keyof D = never> extends HeaderColumn<D, A> {
+        id: string | number;
+    }
+
+    export type Page<D> = Row<D>[];
+
+    export interface EnhancedColumn<D, A extends keyof D = never> extends Column<D, A> {
+        render: (type: string) => any;
+        getHeaderProps: (userProps?: any) => any;
+        getSortByToggleProps: (userProps?: any) => any;
+        sorted: boolean;
+        sortedDesc: boolean;
+        sortedIndex: number;
+    }
+
+    export type HeaderGroup<D, A extends keyof D = never> = {
+        headers: EnhancedColumn<D, A>[];
+        getRowProps: (userProps?: any) => any;
+    };
+
+    export interface Hooks<D> {
+        beforeRender: [];
+        columns: [];
+        headerGroups: [];
+        headers: [];
+        rows: Row<D>[];
+        row: [];
+        renderableRows: [];
+        getTableProps: [];
+        getRowProps: [];
+        getHeaderRowProps: [];
+        getHeaderProps: [];
+        getCellProps: [];
+    }
+
+    export interface TableInstance<D>
+        extends TableOptions<D>,
+            UseRowsValues<D>,
+            UseFiltersValues,
+            UsePaginationValues<D>,
+            UseColumnsValues<D> {
+        hooks: Hooks<D>;
+        rows: Row<D>[];
+        columns: EnhancedColumn<D>[];
+        getTableProps: (userProps?: any) => any;
+        getRowProps: (userProps?: any) => any;
+        prepareRow: (row: Row<D>) => any;
+        getSelectRowToggleProps: (userProps?: any) => any;
+        toggleSelectAll: (forcedState: boolean) => any;
+    }
+
+    export interface TableOptions<D> {
+        data: D[];
+        columns: HeaderColumn<D>[];
+        state?: [any, Dispatch<SetStateAction<any>>];
+        debug?: boolean;
+        sortByFn?: (a: any, b: any, desc: boolean) => 0 | 1 | -1;
+        manualSorting?: boolean;
+        disableSorting?: boolean;
+        defaultSortDesc?: boolean;
+        disableMultiSort?: boolean;
+    }
+
+    export interface RowsProps {
+        subRowsKey: string;
+    }
+
+    export interface FiltersProps {
+        filterFn: () => void;
+        manualFilters: boolean;
+        disableFilters: boolean;
+        setFilter: () => any;
+        setAllFilters: () => any;
+    }
+
+    export interface UsePaginationValues<D> {
+        nextPage: () => any;
+        previousPage: () => any;
+        setPageSize: (size: number) => any;
+        gotoPage: (page: number) => any;
+        canPreviousPage: boolean;
+        canNextPage: boolean;
+        page: Page<D>;
+        pageOptions: [];
+    }
+
+    export interface UseRowsValues<D> {
+        rows: Row<D>[];
+    }
+
+    export interface UseColumnsValues<D> {
+        columns: EnhancedColumn<D>[];
+        headerGroups: HeaderGroup<D>[];
+        headers: EnhancedColumn<D>[];
+    }
+
+    export interface UseFiltersValues {
+        setFilter: () => any;
+        setAllFilters: () => any;
+    }
+
+    export function useTable<D>(props: TableOptions<D>, ...plugins: any[]): TableInstance<D>;
+
+    export function useColumns<D>(props: TableOptions<D>): TableOptions<D> & UseColumnsValues<D>;
+
+    export function useRows<D>(props: TableOptions<D>): TableOptions<D> & UseRowsValues<D>;
+
+    export function useFilters<D>(
+        props: TableOptions<D>,
+    ): TableOptions<D> & {
+        rows: Row<D>[];
+    };
+
+    export function useSortBy<D>(
+        props: TableOptions<D>,
+    ): TableOptions<D> & {
+        rows: Row<D>[];
+    };
+
+    export function useGroupBy<D>(props: TableOptions<D>): TableOptions<D> & { rows: Row<D>[] };
+
+    export function usePagination<D>(props: TableOptions<D>): UsePaginationValues<D>;
+
+    export function useFlexLayout<D>(props: TableOptions<D>): TableOptions<D>;
+
+    export function useExpanded<D>(
+        props: TableOptions<D>,
+    ): TableOptions<D> & {
+        toggleExpandedByPath: () => any;
+        expandedDepth: [];
+        rows: [];
+    };
+
+    export function useTableState(
+        initialState?: any,
+        overriddenState?: any,
+        options?: {
+            reducer?: (oldState: any, newState: any, type: string) => any;
+            useState?: [any, Dispatch<SetStateAction<any>>];
+        },
+    ): any;
+
+    export const actions: any;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-alpha.34",
+  "version": "7.0.0-beta.1",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -27,11 +27,12 @@
     "prepare": "yarn build",
     "release": "yarn publish",
     "releaseNext": "yarn publish --tag next",
-    "format": "prettier ./src/**/*.{md,js,jsx,tsx} --write"
+    "format": "prettier {src,src/**,examples/*/src,examples/*/src/**}/*.{md,js,jsx,tsx} --write"
   },
   "files": [
     "CHANGELOG.md",
     "src/**/*.js",
+    "index.d.ts",
     "dist",
     "LICENCE",
     "package.json",

src/plugin-hooks/useExpanded.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
-import { mergeProps, applyPropHooks } from '../utils'
+import { mergeProps, applyPropHooks, expandRows } from '../utils'
 import { addActions, actions } from '../actions'
 import { defaultState } from '../hooks/useTableState'
 
@@ -81,36 +81,12 @@ function useMain(instance) {
     if (process.env.NODE_ENV === 'development' && debug)
       console.info('getExpandedRows')
 
-    const expandedRows = []
-
-    // Here we do some mutation, but it's the last stage in the
-    // immutable process so this is safe
-    const handleRow = row => {
-      const key = row.path.join('.')
-      row.isExpanded =
-        (row.original && row.original[manualExpandedKey]) ||
-        expanded.includes(key)
-
-      expandedRows.push(row)
-
-      row.canExpand = row.subRows && !!row.subRows.length
-
-      if (
-        paginateExpandedRows &&
-        row.isExpanded &&
-        row.subRows &&
-        row.subRows.length
-      ) {
-        row.subRows.forEach(handleRow)
-      }
-
-      return row
+    if (paginateExpandedRows) {
+      return expandRows(rows, { manualExpandedKey, expanded })
     }
 
-    rows.forEach(handleRow)
-
-    return expandedRows
-  }, [debug, rows, manualExpandedKey, expanded, paginateExpandedRows])
+    return rows
+  }, [debug, paginateExpandedRows, rows, manualExpandedKey, expanded])
 
   const expandedDepth = findExpandedDepth(expanded)
 

src/plugin-hooks/usePagination.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 //
 import { addActions, actions } from '../actions'
 import { defaultState } from '../hooks/useTableState'
-import { ensurePluginOrder, safeUseLayoutEffect } from '../utils'
+import { ensurePluginOrder, safeUseLayoutEffect, expandRows } from '../utils'
 
 defaultState.pageSize = 10
 defaultState.pageIndex = 0
@@ -31,11 +31,15 @@ function useMain(instance) {
     rows,
     manualPagination,
     disablePageResetOnDataChange,
+    manualExpandedKey = 'expanded',
     debug,
     plugins,
     pageCount: userPageCount,
     paginateExpandedRows = true,
-    state: [{ pageSize, pageIndex, filters, groupBy, sortBy }, setState],
+    state: [
+      { pageSize, pageIndex, filters, groupBy, sortBy, expanded },
+      setState,
+    ],
   } = instance
 
   ensurePluginOrder(
@@ -49,8 +53,15 @@ function useMain(instance) {
 
   const isPageIndexMountedRef = React.useRef()
 
+  // Bypass any effects from firing when this changes
+  const disablePageResetOnDataChangeRef = React.useRef()
+  disablePageResetOnDataChangeRef.current = disablePageResetOnDataChange
+
   safeUseLayoutEffect(() => {
-    if (isPageIndexMountedRef.current && !disablePageResetOnDataChange) {
+    if (
+      isPageIndexMountedRef.current &&
+      !disablePageResetOnDataChangeRef.current
+    ) {
       setState(
         old => ({
           ...old,
@@ -60,7 +71,7 @@ function useMain(instance) {
       )
     }
     isPageIndexMountedRef.current = true
-  }, [setState, rowDep, filters, groupBy, sortBy, disablePageResetOnDataChange])
+  }, [setState, rowDep, filters, groupBy, sortBy])
 
   const pageCount = manualPagination
     ? userPageCount
@@ -90,57 +101,63 @@ function useMain(instance) {
       return page
     }
 
-    const expandedPage = []
-
-    const handleRow = row => {
-      expandedPage.push(row)
-
-      if (row.subRows && row.subRows.length && row.isExpanded) {
-        row.subRows.forEach(handleRow)
-      }
-    }
-
-    page.forEach(handleRow)
-
-    return expandedPage
-  }, [debug, manualPagination, pageIndex, pageSize, paginateExpandedRows, rows])
+    return expandRows(page, { manualExpandedKey, expanded })
+  }, [
+    debug,
+    expanded,
+    manualExpandedKey,
+    manualPagination,
+    pageIndex,
+    pageSize,
+    paginateExpandedRows,
+    rows,
+  ])
 
   const canPreviousPage = pageIndex > 0
   const canNextPage = pageCount === -1 || pageIndex < pageCount - 1
 
-  const gotoPage = pageIndex => {
-    if (process.env.NODE_ENV === 'development' && debug)
-      console.info('gotoPage')
-    return setState(old => {
-      if (pageIndex < 0 || pageIndex > pageCount - 1) {
-        return old
-      }
-      return {
-        ...old,
-        pageIndex,
-      }
-    }, actions.pageChange)
-  }
+  const gotoPage = React.useCallback(
+    updater => {
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.info('gotoPage')
+      return setState(old => {
+        const newPageIndex =
+          typeof updater === 'function' ? updater(old.pageIndex) : updater
 
-  const previousPage = () => {
-    return gotoPage(pageIndex - 1)
-  }
+        if (newPageIndex < 0 || newPageIndex > pageCount - 1) {
+          return old
+        }
+        return {
+          ...old,
+          pageIndex: newPageIndex,
+        }
+      }, actions.pageChange)
+    },
+    [debug, pageCount, setState]
+  )
 
-  const nextPage = () => {
-    return gotoPage(pageIndex + 1)
-  }
+  const previousPage = React.useCallback(() => {
+    return gotoPage(old => old - 1)
+  }, [gotoPage])
 
-  const setPageSize = pageSize => {
-    setState(old => {
-      const topRowIndex = old.pageSize * old.pageIndex
-      const pageIndex = Math.floor(topRowIndex / pageSize)
-      return {
-        ...old,
-        pageIndex,
-        pageSize,
-      }
-    }, actions.pageSizeChange)
-  }
+  const nextPage = React.useCallback(() => {
+    return gotoPage(old => old + 1)
+  }, [gotoPage])
+
+  const setPageSize = React.useCallback(
+    pageSize => {
+      setState(old => {
+        const topRowIndex = old.pageSize * old.pageIndex
+        const pageIndex = Math.floor(topRowIndex / pageSize)
+        return {
+          ...old,
+          pageIndex,
+          pageSize,
+        }
+      }, actions.pageSizeChange)
+    },
+    [setState]
+  )
 
   return {
     ...instance,

src/plugin-hooks/useRowSelect.js

@@ -38,7 +38,7 @@ function useMain(instance) {
     []
   )
 
-  const isAllRowsSelected = rowPaths.length === selectedRows.length
+  const isAllRowsSelected = rowPaths.length > 0 && rowPaths.length === selectedRows.length
 
   const toggleRowSelectedAll = set => {
     setState(old => {

src/utils.js

@@ -265,10 +265,22 @@ export function getElementDimensions(element) {
 }
 
 export function flexRender(Comp, props) {
-  if (typeof Comp === 'function' || typeof Comp === 'object') {
-    return <Comp {...props} />
-  }
-  return Comp
+  return isReactComponent(Comp) ? <Comp {...props} /> : Comp
+}
+
+function isClassComponent(component) {
+  return (
+    typeof component === 'function' &&
+    !!Object.getPrototypeOf(component).isReactComponent
+  )
+}
+
+function isFunctionComponent(component) {
+  return typeof component === 'function'
+}
+
+function isReactComponent(component) {
+  return isClassComponent(component) || isFunctionComponent(component)
 }
 
 export const mergeProps = (...groups) => {
@@ -373,6 +385,30 @@ This usually means you need to need to name your plugin hook by setting the 'plu
   })
 }
 
+export function expandRows(rows, { manualExpandedKey, expanded }) {
+  const expandedRows = []
+
+  const handleRow = row => {
+    const key = row.path.join('.')
+
+    row.isExpanded =
+      (row.original && row.original[manualExpandedKey]) ||
+      expanded.includes(key)
+
+    row.canExpand = row.subRows && !!row.subRows.length
+
+    expandedRows.push(row)
+
+    if (row.subRows && row.subRows.length && row.isExpanded) {
+      row.subRows.forEach(handleRow)
+    }
+  }
+
+  rows.forEach(handleRow)
+
+  return expandedRows
+}
+
 //
 
 function makePathArray(obj) {