v7.0.0-beta.0

README.md

@@ -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.

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.35",
+  "version": "7.0.0-beta.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -32,6 +32,7 @@
   "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(
@@ -97,20 +101,17 @@ 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

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

@@ -385,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) {