diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..df6b0e0 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,27 @@ +name: CI +on: + push: + branches: [master] + pull_request: + branches: [master] +jobs: + build-and-test: + name: '${{ matrix.platform }}: node.js ${{ matrix.node-version }}' + strategy: + matrix: + platform: [ubuntu-latest, windows-latest, macos-latest] + node-version: [10, 12] + runs-on: ${{ matrix.platform }} + env: + CI: true + steps: + - name: Checkout + uses: actions/checkout@master + - name: Set up Node.js + uses: actions/setup-node@master + with: + node-version: ${{ matrix.node-version }} + - name: Build and test + run: | + yarn install + yarn test diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index cb3f77f..0000000 --- a/.travis.yml +++ /dev/null @@ -1,18 +0,0 @@ -language: node_js - -node_js: - - 10 - - 12 - -os: - - linux - - osx - - windows - -env: - global: - - YARN_GPG=no - -cache: yarn - -script: yarn test diff --git a/README.md b/README.md index d9f36f2..8100e0e 100644 --- a/README.md +++ b/README.md @@ -4,32 +4,14 @@ Hooks for building **lightweight, fast and extendable datagrids** for React - - - - - - - - - - - Join the community on Spectrum - - - - - - - -
-
- - - +[![GitHub Actions CI](https://github.com/tannerlinsley/react-table/workflows/CI/badge.svg)](https://github.com/tannerlinsley/react-table/actions) +[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-table@next)](https://bundlephobia.com/result?p=react-table@next) +[![NPM Package](https://img.shields.io/npm/dm/react-table.svg)](https://npmjs.com/package/react-table) +[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-table) +[![GitHub Stars](https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star)](https://github.com/tannerlinsley/react-table) +[![Twitter Followers](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley) -
-
+### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/) ## Features @@ -71,6 +53,8 @@ Please [visit the v6 branch](https://github.com/tannerlinsley/react-table/tree/v The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component. +In case you would need to have both v6 and v7 in one app during the migration process (large codebase, complex use cases), you can install an official [`react-table-v6` package](https://www.npmjs.com/package/react-table-v6) alongside the `react-table`. + ## Documentation - [Installation](./docs/installation.md) - Walk through how to install React Table @@ -84,6 +68,21 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I **React Table v7** is being built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley) + + + + + + + +
+ + + + + Coming Soon! +
+ @@ -154,7 +153,6 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I @@ -179,6 +177,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
David Pickut
Jordan Soltman
Robert Tajnšek
+
Pekka Tapani
diff --git a/TYPESCRIPT.md b/TYPESCRIPT.md index 9b7c0bc..8d228d3 100644 --- a/TYPESCRIPT.md +++ b/TYPESCRIPT.md @@ -2,7 +2,7 @@ React-table is a very flexible library, because of this, the shape of data at almost every contact point is defined by the specific set of plugins that you choose to pass to `useTable`. -Tto get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions. +To get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions. You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened. @@ -32,7 +32,7 @@ export interface TableOptions UseSortByOptions {} ``` -Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extends all of the top level interfaces. +Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extend all of the top-level interfaces. ## Caveat diff --git a/docs/api.md b/docs/api.md index 44ee2fc..dab9dbd 100644 --- a/docs/api.md +++ b/docs/api.md @@ -575,8 +575,8 @@ The following options are supported on any `Column` object passed to the `column - Must return valid JSX - This function (or component) formats this column's value when it is being grouped and aggregated, eg. If this column was showing the number of visits for a user to a website and it was currently being grouped to show an **average** of the values, the `Aggregated` function for this column could format that value to `1,000 Avg. Visits` - `disableGrouping: Boolean` - - Defaults to `true` - - If `true`, this column is able to be grouped. + - Defaults to `false` + - If `true`, will disable grouping for this column. ### Instance Properties diff --git a/examples/absolute-layout/src/App.js b/examples/absolute-layout/src/App.js index 4538427..5f28633 100644 --- a/examples/absolute-layout/src/App.js +++ b/examples/absolute-layout/src/App.js @@ -93,18 +93,17 @@ function Table({ columns, data }) {
{rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return (
- {row.cells.map(cell => { - return ( -
- {cell.render('Cell')} -
- ) - })} + {row.cells.map((cell,index) => ( +
+ {cell.render('Cell')} +
+ ))}
- ) + )} )}
diff --git a/examples/animated-framer-motion/src/App.js b/examples/animated-framer-motion/src/App.js index a6ff7bb..1e4402f 100644 --- a/examples/animated-framer-motion/src/App.js +++ b/examples/animated-framer-motion/src/App.js @@ -268,8 +268,9 @@ function Table({ columns, data }) { {rows.slice(0, 10).map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( - ) + )} )} diff --git a/examples/basic/src/App.js b/examples/basic/src/App.js index d3cd200..0e25db4 100644 --- a/examples/basic/src/App.js +++ b/examples/basic/src/App.js @@ -60,14 +60,15 @@ function Table({ columns, data }) { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return })} - ) + )} )}
-
Pekka
Jon Eickmeier
Syed Hussain
{cell.render('Cell')}
diff --git a/examples/block-layout/src/App.js b/examples/block-layout/src/App.js index 1e87adf..61cb01f 100644 --- a/examples/block-layout/src/App.js +++ b/examples/block-layout/src/App.js @@ -76,8 +76,9 @@ function Table({ columns, data }) {
{rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return (
{row.cells.map(cell => { return ( @@ -87,7 +88,7 @@ function Table({ columns, data }) { ) })}
- ) + )} )}
diff --git a/examples/column-ordering/src/App.js b/examples/column-ordering/src/App.js index d7774c9..87745bc 100644 --- a/examples/column-ordering/src/App.js +++ b/examples/column-ordering/src/App.js @@ -81,8 +81,9 @@ function Table({ columns, data }) { {rows.slice(0, 10).map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map((cell, i) => { return ( @@ -90,7 +91,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/column-resizing/src/App.js b/examples/column-resizing/src/App.js index 9ed469a..41f88f0 100644 --- a/examples/column-resizing/src/App.js +++ b/examples/column-resizing/src/App.js @@ -103,8 +103,9 @@ function Table({ columns, data }) {
{rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return (
{row.cells.map(cell => { return ( @@ -114,7 +115,7 @@ function Table({ columns, data }) { ) })}
- ) + )} )}
diff --git a/examples/editable-data/src/App.js b/examples/editable-data/src/App.js index 508c19e..087a15b 100644 --- a/examples/editable-data/src/App.js +++ b/examples/editable-data/src/App.js @@ -127,8 +127,9 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { {page.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -136,7 +137,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { ) })} - ) + )} )} diff --git a/examples/expanding/src/App.js b/examples/expanding/src/App.js index 6d7f82c..f5bc9c4 100644 --- a/examples/expanding/src/App.js +++ b/examples/expanding/src/App.js @@ -63,8 +63,9 @@ function Table({ columns: userColumns, data }) { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -72,7 +73,7 @@ function Table({ columns: userColumns, data }) { ) })} - ) + )} )} diff --git a/examples/filtering/src/App.js b/examples/filtering/src/App.js index cb00edd..94baf78 100644 --- a/examples/filtering/src/App.js +++ b/examples/filtering/src/App.js @@ -254,8 +254,9 @@ function Table({ columns, data }) { {firstPageRows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -263,7 +264,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/grouping/src/App.js b/examples/grouping/src/App.js index f8f84ae..728384c 100644 --- a/examples/grouping/src/App.js +++ b/examples/grouping/src/App.js @@ -80,8 +80,9 @@ function Table({ columns, data }) { {firstPageRows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -120,7 +121,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/kitchen-sink-controlled/src/App.js b/examples/kitchen-sink-controlled/src/App.js index 4c00bd6..2cecdd9 100644 --- a/examples/kitchen-sink-controlled/src/App.js +++ b/examples/kitchen-sink-controlled/src/App.js @@ -351,8 +351,9 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { {page.map( - row => - prepareRow(row) || ( + row => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -378,7 +379,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { ) })} - ) + )} )} diff --git a/examples/kitchen-sink/src/App.js b/examples/kitchen-sink/src/App.js index 2a63188..1ef6c61 100644 --- a/examples/kitchen-sink/src/App.js +++ b/examples/kitchen-sink/src/App.js @@ -351,8 +351,9 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { {page.map( - row => - prepareRow(row) || ( + row => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -378,7 +379,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) { ) })} - ) + )} )} diff --git a/examples/material-UI-components/src/App.js b/examples/material-UI-components/src/App.js index f61b271..c11912f 100644 --- a/examples/material-UI-components/src/App.js +++ b/examples/material-UI-components/src/App.js @@ -40,8 +40,9 @@ function Table({ columns, data }) { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -51,7 +52,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/pagination-controlled/src/App.js b/examples/pagination-controlled/src/App.js index d6ae812..5bc8221 100644 --- a/examples/pagination-controlled/src/App.js +++ b/examples/pagination-controlled/src/App.js @@ -116,8 +116,9 @@ function Table({ {page.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -125,7 +126,7 @@ function Table({ ); })} - ) + )} )} {loading ? ( diff --git a/examples/pagination/src/App.js b/examples/pagination/src/App.js index f3c227d..136c9a6 100644 --- a/examples/pagination/src/App.js +++ b/examples/pagination/src/App.js @@ -96,8 +96,9 @@ function Table({ columns, data }) { {page.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -105,7 +106,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/row-selection/src/App.js b/examples/row-selection/src/App.js index 93a9707..a429d7e 100644 --- a/examples/row-selection/src/App.js +++ b/examples/row-selection/src/App.js @@ -66,8 +66,9 @@ function Table({ columns, data }) { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -75,7 +76,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/sorting/README.md b/examples/sorting/README.md index 6085e9d..8965ded 100644 --- a/examples/sorting/README.md +++ b/examples/sorting/README.md @@ -45,14 +45,15 @@ function MyTable() { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return {cell.render('Cell')} })} - ) + )} )} diff --git a/examples/sorting/src/App.js b/examples/sorting/src/App.js index 475096d..8ee9c6c 100644 --- a/examples/sorting/src/App.js +++ b/examples/sorting/src/App.js @@ -78,8 +78,9 @@ function Table({ columns, data }) { {firstPageRows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( {row.cells.map(cell => { return ( @@ -87,7 +88,7 @@ function Table({ columns, data }) { ) })} - ) + )} )} diff --git a/examples/sub-components/src/App.js b/examples/sub-components/src/App.js index ea81719..00942b7 100644 --- a/examples/sub-components/src/App.js +++ b/examples/sub-components/src/App.js @@ -71,8 +71,9 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) { {rows.map( - (row, i) => - prepareRow(row) || ( + (row, i) => { + prepareRow(row); + return ( // Use a React.Fragment here so the table markup is still valid <> @@ -101,7 +102,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) { ) : null} - ) + )} )} diff --git a/index.d.ts b/index.d.ts index 9071664..26ac6ba 100644 --- a/index.d.ts +++ b/index.d.ts @@ -41,14 +41,14 @@ export interface Row extends UseTableRowProps {} /* #region useTable */ export function useTable( options: TableOptions, - ...plugins: PluginHook[] + ...plugins: Array> ): TableInstance /** * NOTE: To use custom options, use "Interface Merging" to add the custom options */ export type UseTableOptions = { - columns: Column[] + columns: Array> data: D[] } & Partial<{ initialState: Partial> @@ -60,40 +60,44 @@ export type UseTableOptions = { ) => TableState defaultColumn: Partial> initialRowStateKey: IdType - getSubRows: (row: Row, relativeIndex: number) => Row[] + getSubRows: (row: Row, relativeIndex: number) => Array> getRowID: (row: Row, relativeIndex: number) => string debug: boolean }> export interface UseTableHooks { - columnsBeforeHeaderGroups: (( - flatColumns: Column[], - instance: TableInstance - ) => Column[])[] - columnsBeforeHeaderGroupsDeps: (( - deps: any[], - instance: TableInstance - ) => any[])[] - useMain: ((instance: TableInstance) => TableInstance)[] - useRows: ((rows: Row[], instance: TableInstance) => Row[])[] - prepareRow: ((row: Row, instance: TableInstance) => Row)[] + columnsBeforeHeaderGroups: Array< + ( + flatColumns: Array>, + instance: TableInstance + ) => Array> + > + columnsBeforeHeaderGroupsDeps: Array< + (deps: any[], instance: TableInstance) => any[] + > + useMain: Array<(instance: TableInstance) => TableInstance> + useRows: Array< + (rows: Array>, instance: TableInstance) => Array> + > + prepareRow: Array<(row: Row, instance: TableInstance) => Row> // Prop Hooks - getTableProps: ((instance: TableInstance) => object)[] - getTableBodyProps: ((instance: TableInstance) => object)[] - getRowProps: ((row: Row, instance: TableInstance) => object)[] - getHeaderGroupProps: (( - headerGroup: HeaderGroup, - instance: TableInstance - ) => object)[] - getHeaderProps: ((column: Column, instance: TableInstance) => object)[] - getCellProps: ((cell: Cell, instance: TableInstance) => object)[] + getTableProps: Array<(instance: TableInstance) => object> + getTableBodyProps: Array<(instance: TableInstance) => object> + getRowProps: Array<(row: Row, instance: TableInstance) => object> + getHeaderGroupProps: Array< + (headerGroup: HeaderGroup, instance: TableInstance) => object + > + getHeaderProps: Array< + (column: Column, instance: TableInstance) => object + > + getCellProps: Array<(cell: Cell, instance: TableInstance) => object> } export interface UseTableColumnOptions extends Accessor, Partial<{ - columns: Column[] + columns: Array> show: boolean | ((instance: TableInstance) => boolean) Header: Renderer> Cell: Renderer> @@ -103,24 +107,24 @@ export interface UseTableColumnOptions }> {} export interface UseTableInstanceProps { - columns: ColumnInstance[] - flatColumns: ColumnInstance[] - headerGroups: HeaderGroup[] - headers: ColumnInstance[] - flatHeaders: ColumnInstance[] - rows: Row[] + columns: Array> + flatColumns: Array> + headerGroups: Array> + headers: Array> + flatHeaders: Array> + rows: Array> getTableProps: (props?: object) => object getTableBodyProps: (props?: object) => object prepareRow: (row: Row) => void rowPaths: string[] - flatRows: Row[] + flatRows: Array> state: TableState setState: SetState totalColumnsWidth: number } export interface UseTableHeaderGroupProps { - headers: ColumnInstance[] + headers: Array> getHeaderGroupProps: (props?: object) => object totalHeaderCount: number } @@ -136,13 +140,13 @@ export interface UseTableColumnProps { } export interface UseTableRowProps { - cells: Cell[] + cells: Array> values: Record, CellValue> getRowProps: (props?: object) => object index: number original: D - path: IdType[] - subRows: Row[] + path: Array> + subRows: Array> } export interface UseTableCellProps { @@ -188,11 +192,13 @@ export namespace useColumnOrder { } export interface UseColumnOrderState { - columnOrder: IdType[] + columnOrder: Array> } export interface UseColumnOrderInstanceProps { - setColumnOrder: (updater: (columnOrder: IdType[]) => IdType[]) => void + setColumnOrder: ( + updater: (columnOrder: Array>) => Array> + ) => void } /* #endregion */ @@ -203,32 +209,31 @@ export namespace useExpanded { } export type UseExpandedOptions = Partial<{ - getSubRows: (row: Row, relativeIndex: number) => Row[] + getSubRows: (row: Row, relativeIndex: number) => Array> manualExpandedKey: IdType paginateExpandedRows: boolean }> export interface UseExpandedHooks { - getExpandedToggleProps: (( - row: Row, - instance: TableInstance - ) => object)[] + getExpandedToggleProps: Array< + (row: Row, instance: TableInstance) => object + > } export interface UseExpandedState { - expanded: IdType[] + expanded: Array> } export interface UseExpandedInstanceProps { - rows: Row[] - toggleExpandedByPath: (path: IdType[], isExpanded: boolean) => void + rows: Array> + toggleExpandedByPath: (path: Array>, isExpanded: boolean) => void expandedDepth: number } export interface UseExpandedRowProps { isExpanded: boolean canExpand: boolean - subRows: Row[] + subRows: Array> toggleExpanded: (isExpanded?: boolean) => void getExpandedToggleProps: (props?: object) => object } @@ -257,8 +262,8 @@ export type UseFiltersColumnOptions = Partial<{ }> export interface UseFiltersInstanceProps { - rows: Row[] - preFilteredRows: Row[] + rows: Array> + preFilteredRows: Array> setFilter: ( columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue @@ -274,8 +279,8 @@ export interface UseFiltersColumnProps { updater: ((filterValue: FilterValue) => FilterValue) | FilterValue ) => void filterValue: FilterValue - preFilteredRows: Row[] - filteredRows: Row[] + preFilteredRows: Array> + filteredRows: Array> } export type FilterProps = HeaderProps @@ -294,11 +299,11 @@ export type DefaultFilterTypes = export interface FilterType { ( - rows: Row[], + rows: Array>, columnId: IdType, filterValue: FilterValue, column: ColumnInstance - ): Row[] + ): Array> autoRemove?: (filterValue: FilterValue) => boolean } /* #endregion */ @@ -313,30 +318,32 @@ export type UseGroupByOptions = Partial<{ manualGroupBy: boolean disableGrouping: boolean aggregations: Record> - groupByFn: (rows: Row[], columnId: IdType) => Record> + groupByFn: ( + rows: Array>, + columnId: IdType + ) => Record> }> export interface UseGroupByHooks { - getGroupByToggleProps: (( - header: HeaderGroup, - instance: TableInstance - ) => object)[] + getGroupByToggleProps: Array< + (header: HeaderGroup, instance: TableInstance) => object + > } export interface UseGroupByState { - groupBy: IdType[] + groupBy: Array> } export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator | Aggregator[] + aggregate: Aggregator | Array> Aggregated: Renderer> disableGrouping: boolean groupByBoundary: boolean }> export interface UseGroupByInstanceProps { - rows: Row[] - preGroupedRows: Row[] + rows: Array> + preGroupedRows: Array> toggleGroupBy: (columnId: IdType, toggle: boolean) => void } @@ -356,9 +363,9 @@ export interface UseGroupByRowProps { groupByID: IdType groupByVal: string values: Record, AggregatedValue> - subRows: Row[] + subRows: Array> depth: number - path: IdType[] + path: Array> index: number } @@ -377,7 +384,7 @@ export type DefaultAggregators = export type AggregatorFn = ( columnValues: CellValue[], - rows: Row[] + rows: Array> ) => AggregatedValue export type Aggregator = | AggregatorFn @@ -405,7 +412,7 @@ export interface UsePaginationState { } export interface UsePaginationInstanceProps { - page: Row[] + page: Array> pageCount: number pageOptions: number[] canPreviousPage: boolean @@ -430,15 +437,14 @@ export type UseRowSelectOptions = Partial<{ }> export interface UseRowSelectHooks { - getToggleRowSelectedProps: (( - row: Row, - instance: TableInstance - ) => object)[] - getToggleAllRowsSelectedProps: ((instance: TableInstance) => object)[] + getToggleRowSelectedProps: Array< + (row: Row, instance: TableInstance) => object + > + getToggleAllRowsSelectedProps: Array<(instance: TableInstance) => object> } export interface UseRowSelectState { - selectedRows: IdType[] + selectedRowPaths: Array> } export interface UseRowSelectInstanceProps { @@ -446,6 +452,7 @@ export interface UseRowSelectInstanceProps { toggleRowSelectedAll: (set?: boolean) => void getToggleAllRowsSelectedProps: (props?: object) => object isAllRowsSelected: boolean + selectedFlatRows: Array> } export interface UseRowSelectRowProps { @@ -512,22 +519,21 @@ export type UseSortByOptions = Partial<{ disableSortRemove: boolean disabledMultiRemove: boolean orderByFn: ( - rows: Row[], - sortFns: SortByFn[], + rows: Array>, + sortFns: Array>, directions: boolean[] - ) => Row[] // CHECK + ) => Array> sortTypes: Record> }> export interface UseSortByHooks { - getSortByToggleProps: (( - column: Column, - instance: TableInstance - ) => object)[] + getSortByToggleProps: Array< + (column: Column, instance: TableInstance) => object + > } export interface UseSortByState { - sortBy: SortingRule[] + sortBy: Array> } export type UseSortByColumnOptions = Partial<{ @@ -538,8 +544,8 @@ export type UseSortByColumnOptions = Partial<{ }> export interface UseSortByInstanceProps { - rows: Row[] - preSortedRows: Row[] + rows: Array> + preSortedRows: Array> toggleSortBy: ( columnId: IdType, descending: boolean, diff --git a/package.json b/package.json index da322f9..ce89b22 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ "commit": "git add . && git-cz", "test": "is-ci \"test:ci\" \"test:dev\"", "test:dev": "jest --watch", - "test:ci": "jest", + "test:ci": "yarn test:jest && yarn test:types", + "test:jest": "jest", + "test:types": "dtslint", "build": "rollup -c", "start": "rollup -c -w", "prepare": "yarn build", @@ -60,6 +62,7 @@ "commitizen": "^4.0.3", "core-js": "3.2.1", "cross-env": "^5.2.0", + "dtslint": "^0.9.8", "eslint": "5.x", "eslint-config-prettier": "^4.3.0", "eslint-config-react-app": "^4.0.1", diff --git a/react-table-config.d.ts b/react-table-config.d.ts index 315d3fe..2e12b86 100644 --- a/react-table-config.d.ts +++ b/react-table-config.d.ts @@ -1,3 +1,43 @@ +import { + UseColumnOrderInstanceProps, + UseColumnOrderState, + UseExpandedInstanceProps, + UseExpandedOptions, + UseExpandedRowProps, + UseExpandedState, + UseFiltersColumnOptions, + UseFiltersColumnProps, + UseFiltersInstanceProps, + UseFiltersOptions, + UseFiltersState, + UseGroupByCellProps, + UseGroupByColumnOptions, + UseGroupByColumnProps, + UseGroupByInstanceProps, + UseGroupByOptions, + UseGroupByRowProps, + UseGroupByState, + UsePaginationInstanceProps, + UsePaginationOptions, + UsePaginationState, + UseResizeColumnsColumnOptions, + UseResizeColumnsHeaderProps, + UseResizeColumnsOptions, + UseRowSelectInstanceProps, + UseRowSelectOptions, + UseRowSelectRowProps, + UseRowSelectState, + UseRowStateCellProps, + UseRowStateInstanceProps, + UseRowStateRowProps, + UseSortByColumnOptions, + UseSortByColumnProps, + UseSortByInstanceProps, + UseSortByOptions, + UseSortByState, + UseTableCellProps, +} from 'react-table' + declare module 'react-table' { // take this file as-is, or comment out the sections that don't apply to your plugin configuration diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js index 3c27a38..5723e0a 100755 --- a/src/hooks/useTable.js +++ b/src/hooks/useTable.js @@ -447,9 +447,10 @@ function calculateHeaderWidths(headers, left = 0) { header.maxWidth ) } - - left += header.totalWidth - sumTotalWidth += header.totalWidth + if (header.isVisible) { + left += header.totalWidth + sumTotalWidth += header.totalWidth + } }) return sumTotalWidth diff --git a/src/plugin-hooks/useGroupBy.js b/src/plugin-hooks/useGroupBy.js index 3182dfa..7f362ec 100755 --- a/src/plugin-hooks/useGroupBy.js +++ b/src/plugin-hooks/useGroupBy.js @@ -93,7 +93,7 @@ function useMain(instance) { column.canGroupBy = accessor ? getFirstDefined( - columnDisableGrouping, + columnDisableGrouping === true ? false : undefined, disableGrouping === true ? false : undefined, true ) diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..164b17b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6"], + "strict": true, + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": ["index.d.ts"] +} diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..c0be260 --- /dev/null +++ b/tslint.json @@ -0,0 +1,9 @@ +{ + "extends": "dtslint/dtslint.json", + "rules": { + "no-empty-interface": false, + "no-unnecessary-generics": false, + "semicolon": false, + "whitespace": false + } +} diff --git a/yarn.lock b/yarn.lock index 78648c7..5e1c90d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1282,6 +1282,11 @@ resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e" integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA== +"@types/parsimmon@^1.3.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@types/parsimmon/-/parsimmon-1.10.0.tgz#ffb81cb023ff435a41d4710a29ab23c561dc9fdf" + integrity sha512-bsTIJFVQv7jnvNiC42ld2pQW2KRI+pAG243L+iATvqzy3X6+NH1obz2itRKDZZ8VVhN3wjwYax/VBGCcXzgTqQ== + "@types/prop-types@*": version "15.7.1" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6" @@ -1939,6 +1944,11 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== +builtin-modules@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" + integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8= + builtin-modules@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" @@ -2045,7 +2055,7 @@ chalk@2.3.1: escape-string-regexp "^1.0.5" supports-color "^5.2.0" -chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2: +chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -2191,11 +2201,21 @@ combined-stream@^1.0.6, combined-stream@~1.0.6: dependencies: delayed-stream "~1.0.0" +command-exists@^1.2.8: + version "1.2.8" + resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291" + integrity sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw== + commander@^2.11.0, commander@^2.20.0, commander@~2.20.0: version "2.20.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== +commander@^2.12.1: + version "2.20.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.1.tgz#3863ce3ca92d0831dcf2a102f5fb4b5926afd0f9" + integrity sha512-cCuLsMhJeWQ/ZpsFTbE765kvVfoeSddc4nU3up4fV+fDBcfUXnbITJ+JzhkdjzOqhURjZgujxaioam4RM9yGUg== + commitizen@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/commitizen/-/commitizen-4.0.3.tgz#c19a4213257d0525b85139e2f36db7cc3b4f6dae" @@ -2595,6 +2615,22 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" +definitelytyped-header-parser@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/definitelytyped-header-parser/-/definitelytyped-header-parser-1.2.0.tgz#f21374b8a18fabcd3ba4b008a0bcbc9db2b7b4c4" + integrity sha512-xpg8uu/2YD/reaVsZV4oJ4g7UDYFqQGWvT1W9Tsj6q4VtWBSaig38Qgah0ZMnQGF9kAsAim08EXDO1nSi0+Nog== + dependencies: + "@types/parsimmon" "^1.3.0" + parsimmon "^1.2.0" + +definitelytyped-header-parser@^3.7.2: + version "3.7.2" + resolved "https://registry.yarnpkg.com/definitelytyped-header-parser/-/definitelytyped-header-parser-3.7.2.tgz#a5b2ec9521762910e870477b01ce9feca06d9fb7" + integrity sha512-nlkiv+QLlRSc3C3qAbusWPaBiyPLldwRFnrxvoxjdZHvHbIh2+U09qdmzzWV35Rs/I3MMhcoWRcVUi3M1G935Q== + dependencies: + "@types/parsimmon" "^1.3.0" + parsimmon "^1.2.0" + del@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/del/-/del-5.0.0.tgz#4fa698b7a1ffb4e2ab3e8929ed699799654d6720" @@ -2717,6 +2753,35 @@ dot-prop@^3.0.0: dependencies: is-obj "^1.0.0" +download-file-sync@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/download-file-sync/-/download-file-sync-1.0.4.tgz#d3e3c543f836f41039455b9034c72e355b036019" + integrity sha1-0+PFQ/g29BA5RVuQNMcuNVsDYBk= + +dts-critic@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dts-critic/-/dts-critic-2.1.0.tgz#d7a6fcdcec301f639b7700fd9a2c9db4ab7071f4" + integrity sha512-vXfmzBfaC4sBML2Er1YfFbcknyxp9t16x1NF0nTYj20gDR1dCF8aOpu/c+CgySxFyqEyLq6t0FkmWwpZEX6VLQ== + dependencies: + command-exists "^1.2.8" + definitelytyped-header-parser "^1.2.0" + download-file-sync "^1.0.4" + semver "^6.2.0" + yargs "^12.0.5" + +dtslint@^0.9.8: + version "0.9.8" + resolved "https://registry.yarnpkg.com/dtslint/-/dtslint-0.9.8.tgz#c1fdc12c73f57f10528f0b4dda04be5c82919129" + integrity sha512-cxxGo0mQO9mFQcUShtPbmmoZ+PrUczEV6R/PaN06dnv2IbgtIgLyrO8NBeU7VeHMxpe6exESy48oom97LWUIkA== + dependencies: + definitelytyped-header-parser "^3.7.2" + dts-critic "^2.1.0" + fs-extra "^6.0.1" + request "^2.88.0" + strip-json-comments "^2.0.1" + tslint "5.14.0" + typescript next + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -3521,6 +3586,15 @@ fs-extra@8.1.0: jsonfile "^4.0.0" universalify "^0.1.0" +fs-extra@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b" + integrity sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA== + dependencies: + graceful-fs "^4.1.2" + jsonfile "^4.0.0" + universalify "^0.1.0" + fs-minipass@^1.2.5: version "1.2.6" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.6.tgz#2c5cc30ded81282bfe8a0d7c7c1853ddeb102c07" @@ -4961,7 +5035,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.9.1: +js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.7.0, js-yaml@^3.9.1: version "3.13.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== @@ -6144,6 +6218,11 @@ parse5@4.0.0: resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== +parsimmon@^1.2.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/parsimmon/-/parsimmon-1.13.0.tgz#6e4ef3dbd45ed6ea6808be600ac4b9c8a44228cf" + integrity sha512-5UIrOCW+gjbILkjKPgTgmq8LKf8TT3Iy7kN2VD7OtQ81facKn8B4gG1X94jWqXYZsxG2KbJhrv/Yq/5H6BQn7A== + pascalcase@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" @@ -6717,7 +6796,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.1" tough-cookie "^2.3.3" -request@^2.87.0: +request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -7020,7 +7099,7 @@ semver@6.1.1: resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b" integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ== -semver@^6.0.0, semver@^6.1.1: +semver@^6.0.0, semver@^6.1.1, semver@^6.2.0: version "6.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== @@ -7684,11 +7763,37 @@ trim-right@^1.0.1: resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM= -tslib@^1.9.0: +tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== +tslint@5.14.0: + version "5.14.0" + resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.14.0.tgz#be62637135ac244fc9b37ed6ea5252c9eba1616e" + integrity sha512-IUla/ieHVnB8Le7LdQFRGlVJid2T/gaJe5VkjzRVSRR6pA2ODYrnfR1hmxi+5+au9l50jBwpbBL34txgv4NnTQ== + dependencies: + babel-code-frame "^6.22.0" + builtin-modules "^1.1.1" + chalk "^2.3.0" + commander "^2.12.1" + diff "^3.2.0" + glob "^7.1.1" + js-yaml "^3.7.0" + minimatch "^3.0.4" + mkdirp "^0.5.1" + resolve "^1.3.2" + semver "^5.3.0" + tslib "^1.8.0" + tsutils "^2.29.0" + +tsutils@^2.29.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99" + integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA== + dependencies: + tslib "^1.8.1" + tunnel-agent@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd" @@ -7718,6 +7823,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@next: + version "3.7.0-dev.20191009" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.0-dev.20191009.tgz#852e49dca797bb35acf930583ef65e7b3b23fc01" + integrity sha512-Vk/wZedTpVd3QAhr3mG1+sbUHcpJ1wfw49Wo1NCQvzMa0vHCJeocEwWzaV2yWprsuuFv4+e8tjCj1Vnme2CMHg== + uglify-js@^3.1.4: version "3.6.0" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5" @@ -8015,7 +8125,7 @@ yargs-parser@^11.1.1: camelcase "^5.0.0" decamelize "^1.2.0" -yargs@^12.0.2: +yargs@^12.0.2, yargs@^12.0.5: version "12.0.5" resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13" integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==