v7.0.0-beta.2

Fixes #1555

README.md

@@ -7,6 +7,9 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 <a href="https://travis-ci.org/tannerlinsley/react-table" target="\_parent">
   <img alt="" src="https://travis-ci.org/tannerlinsley/react-table.svg?branch=master" />
 </a>
+<a href="https://bundlephobia.com/result?p=react-table@next" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/react-table@next" />
+</a>
 <a href="https://npmjs.com/package/react-table" target="\_parent">
   <img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
 </a>
@@ -30,7 +33,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 
 ## Features
 
-- Lightweight (4kb - 11kb depending on features and tree-shaking)
+- Lightweight (4kb - 9kb depending on features and tree-shaking)
 - Headless (100% customizable, Bring-your-own-UI)
 - Auto out of the box, fully controllable API
 - Sorting (Multi and Stable)
@@ -52,7 +55,7 @@ React Table v7 is still under active development, and its API is still changing,
 
 #### Should I use v7@beta in production?
 
-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.
+You can use it in 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?
 
@@ -172,6 +175,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
         <div>Dan Houle</div>
         <div>David Pickut</div>
         <div>Jordan Soltman</div>
+        <div>Robert Tajnšek</div>
       </td>
     </tr>
   </tbody>

docs/api.md

@@ -475,13 +475,14 @@ The following properties are available on every `Column` object returned by the
 
 ```js
 function Table({ columns, data }) {
-  // Set some default sorting state
+  // Set some default sorting state. For this an additional import of useTableState is needed
   const state = useTableState({ sortBy: [{ id: 'firstName', desc: true }] })
 
   const { getTableProps, headerGroups, rows, prepareRow } = useTable(
     {
       columns,
       data,
+      state,
     },
     useSortBy // Use the sortBy hook
   )

index.d.ts

@@ -1,184 +1,288 @@
-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;
+  import { ReactNode, useState } from 'react'
+
+  type StringKey<D> = Extract<keyof D, string>
+  type IdType<D> = StringKey<D> | string
+
+  type SortingRule<D> = {
+    id: IdType<D>
+    desc: boolean
+  }
+
+  export type SortingRules<D> = SortingRule<D>[]
+
+  export type SortByFn = (a: any, b: any, desc: boolean) => 0 | 1 | -1
+
+  export type Filters<D> = Record<IdType<D>, string>
+
+  export interface Cell<D = {}> extends TableInstance<D> {
+    cell: { value: any }
+    column: Column<D>
+    row: Row<D>
+    render: (type: 'Cell' | 'Aggregated', userProps?: any) => any
+    isGrouped?: boolean
+    isAggregated?: boolean
+    isRepeatedValue?: boolean
+    getCellProps: () => any
+  }
+
+  export interface Row<D = {}> {
+    index: number
+    cells: Cell<D>[]
+    getRowProps: (userProps?: any) => any
+    original: D
+    path: any[]
+    values: any[]
+    depth: number
+  }
+
+  export interface UseExpandedRow<D = {}> {
+    subRows?: D[]
+    groupByID?: string | number
+    toggleExpanded?: () => any
+    isExpanded?: boolean
+    isAggregated?: boolean
+  }
+
+  export type AccessorFn<D> = (
+    originalRow: D,
+    index: number,
+    sub: {
+      subRows: [D]
+      depth: number
+      data: [D]
     }
+  ) => unknown
 
-    export interface Row<D> {
-        index: number;
-        cells: Cell<D>[];
-        getRowProps: () => any;
-        original: any;
+  export interface HeaderColumn<D> {
+    /**
+     * This string/function is used to build the data model for your column.
+     */
+    accessor: IdType<D> | AccessorFn<D>
+    Header?: ReactNode | ((props: TableInstance<D>) => ReactNode)
+    Filter?: ReactNode | ((props: TableInstance<D>) => ReactNode)
+    Cell?: ReactNode | ((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?: IdType<D>
+    minWidth?: string | number
+    maxWidth?: string | number
+    width?: string | number
+    disableSorting?: boolean
+    canSortBy?: boolean
+    sortByFn?: SortByFn
+    defaultSortDesc?: boolean
+    isAggregated?: any
+  }
+
+  export interface Column<D> extends HeaderColumn<D> {
+    show?: boolean | ((instance: TableInstance<D>) => boolean)
+    columns?: Column<D>[]
+  }
+
+  export type Page<D = {}> = Row<D>[]
+
+  export interface EnhancedColumn<D>
+    extends Omit<Column<D>, 'columns'>,
+      TableInstance<D> {
+    id: IdType<D>
+    column: Column<D>
+    render: (type: 'Header' | 'Filter', userProps?: any) => any
+    getHeaderProps: (userProps?: any) => any
+    getSortByToggleProps: (userProps?: any) => any
+    isSorted: boolean
+    isSortedDesc: boolean
+    sortedIndex: number
+    isVisible: boolean
+    canSort?: boolean
+  }
+
+  export interface HeaderGroup<D = {}> {
+    headers: EnhancedColumn<D>[]
+    getHeaderGroupProps: (userProps?: any) => any
+  }
+
+  export interface Hooks {
+    columnsBeforeHeaderGroups: any[]
+    columnsBeforeHeaderGroupsDeps: any[]
+    useMain: any[]
+    useColumns: any[]
+    useHeaders: any[]
+    useHeaderGroups: any[]
+    useRows: any[]
+    prepareRow: any[]
+    getTableProps: any[]
+    getRowProps: any[]
+    getHeaderGroupProps: any[]
+    getHeaderProps: any[]
+    getCellProps: any[]
+  }
+
+  export interface RowsProps {
+    subRowsKey: string
+  }
+
+  export interface FiltersProps {
+    filterFn: () => void
+    manualFilters: boolean
+    disableFilters: boolean
+    setFilter: () => any
+    setAllFilters: () => any
+  }
+
+  export interface UsePaginationState {
+    pageIndex: number
+    pageSize: number
+    pageCount: number
+    rowCount: number
+  }
+
+  export interface UsePaginationValues<D = {}> {
+    page: Page<D>
+    pageIndex: number // yes, this is on instance and state
+    pageSize: number // yes, this is on instance and state
+    canPreviousPage: boolean
+    canNextPage: boolean
+    nextPage: () => any
+    previousPage: () => any
+    setPageSize: (size: number) => any
+    pageOptions: any[]
+    manualPagination: boolean
+    paginateExpandedRows: boolean
+    disablePageResetOnDataChange: boolean
+    pageCount: number
+    gotoPage: (page: number) => any
+  }
+
+  export interface UseFiltersState<D> {
+    filters?: Filters<D>
+  }
+
+  export interface UseFiltersValues<D> {
+    setFilter: (columnID: keyof D, value: string) => void
+    setAllFilters: (values: Filters<D>) => void
+    disableFilters: boolean
+  }
+
+  export interface UseGroupByValues {
+    groupByFn: any
+    manualGroupBy: boolean
+    disableGrouping: boolean
+    aggregations: any
+  }
+
+  export interface UseGroupByState {
+    groupBy: string[]
+    isAggregated?: boolean
+  }
+
+  export interface UseExpandedValues {
+    toggleExpanded?: () => any
+  }
+
+  export interface UseSortbyOptions {
+    sortByFn?: SortByFn
+    manualSorting?: boolean
+    disableSorting?: boolean
+    defaultSortDesc?: boolean
+    disableMultiSort?: boolean
+  }
+
+  export interface UseSortbyState<D> {
+    sortBy?: SortingRules<D>
+  }
+
+  export interface TableInstance<D = {}> extends TableOptions<D> {
+    hooks: Hooks
+    rows: Row<D>[]
+    columns: EnhancedColumn<D>[]
+    headerGroups: HeaderGroup<D>[]
+    headers: HeaderGroup<D>[]
+    getTableProps: (userProps?: any) => any
+    getRowProps: (userProps?: any) => any
+    prepareRow: (row: Row<D>) => any
+  }
+
+  export interface TableOptions<D = {}> {
+    data: D[]
+    columns: HeaderColumn<D>[]
+    state: State<D>
+    debug?: boolean
+    loading: boolean
+    defaultColumn?: Partial<Column<D>>
+  }
+
+  // The empty definition of TableState is not an error. It provides a definition
+  // for the state, that can then be extended in the users code.
+  //
+  // e.g.
+  //
+  // export interface TableState<D = {}}>
+  //     extends UsePaginationState,
+  //       UseGroupByState,
+  //       UseSortbyState<D>,
+  //       UseFiltersState<D> {}
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface TableState<D = {}> {}
+
+  export type SetState<D> = (
+    updater: (old: TableState<D>) => TableState<D>,
+    actions: any
+  ) => void
+
+  export type State<D> = [TableState<D>, SetState<D>]
+
+  export function useTable<D = {}>(
+    props: TableOptions<D>,
+    ...plugins: any[]
+  ): TableInstance<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 useExpanded<D = {}>(
+    props: TableOptions<D>
+  ): TableOptions<D> & {
+    toggleExpandedByPath: () => any
+    expandedDepth: []
+    rows: Row<D>[]
+  }
+
+  export function useTableState<D = {}>(
+    initialState?: Partial<TableState<D>>,
+    overriddenState?: Partial<TableState<D>>,
+    options?: {
+      reducer?: (
+        oldState: TableState<D>,
+        newState: TableState<D>,
+        type: string
+      ) => any
+      useState?: typeof useState
     }
+  ): State<D>
 
-    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);
+  export const actions: Record<string, string>
 
-        /**
-         * 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 function addActions(...actions: string[]): void
 
-    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;
-}
+  export const defaultState: Record<string, any>
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/hooks/useTable.js

@@ -246,7 +246,7 @@ export const useTable = (props, ...plugins) => {
       mergeProps(
         {
           key: ['header', column.id].join('_'),
-          colSpan: column.totalHeaderCount,
+          colSpan: column.totalVisibleHeaderCount,
         },
         applyPropHooks(
           instanceRef.current.hooks.getHeaderProps,

src/utils.js

@@ -182,14 +182,27 @@ export function determineHeaderVisibility(instance) {
         : !!column.show
       : false
 
+    let totalVisibleHeaderCount = 0
+
     if (column.headers && column.headers.length) {
-      column.headers.forEach(subColumn =>
-        handleColumn(subColumn, column.isVisible)
+      column.headers.forEach(
+        subColumn =>
+          (totalVisibleHeaderCount += handleColumn(subColumn, column.isVisible))
       )
+    } else {
+      totalVisibleHeaderCount = column.isVisible ? 1 : 0
     }
+
+    column.totalVisibleHeaderCount = totalVisibleHeaderCount
+
+    return totalVisibleHeaderCount
   }
 
-  headers.forEach(subHeader => handleColumn(subHeader, true))
+  let totalVisibleHeaderCount = 0
+
+  headers.forEach(
+    subHeader => (totalVisibleHeaderCount += handleColumn(subHeader, true))
+  )
 }
 
 export function getBy(obj, path, def) {