diff --git a/CHANGELOG.md b/CHANGELOG.md index cc8e914..4f3d5bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 7.0.0-beta.14 + +- Renamed + - `disableSorting` to `disableSortBy` + - `disableGroupBy` to `disableGroupBy` + - `column.disableSorting` to `column.disableSortBy` + - `column.disableGroupBy` to `column.disableGroupBy` +- Removed propType definitions. Since types are now being maintained, it makes little sense to also maintain these. Cooincidentally, this also saves some bundle size in some scenarios where they may not be removed properly by a developer's bundler. + ## 7.0.0-beta.13 - Added options @@ -8,8 +17,8 @@ - `column.defaultCanFilter` - `column.defaultCanGroupBy` - Renamed - - `disableGrouping` to `disableGroupBy` - - `column.disableGrouping` to `column.disableGroupBy` + - `disableGroupBy` to `disableGroupBy` + - `column.disableGroupBy` to `column.disableGroupBy` ## 7.0.0-beta.0 diff --git a/README.md b/README.md index 785e485..3a8b9da 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ 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`. +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-6` package](https://www.npmjs.com/package/react-table-6) alongside the `react-table`. ## Documentation diff --git a/docs/api.md b/docs/api.md index eac75fd..4b660b6 100644 --- a/docs/api.md +++ b/docs/api.md @@ -58,7 +58,7 @@ To dive deeper into plugins, see Plugins](TODO) and the [Plugin Guide The order and usage of plugin hooks must follow The Laws of Hooks, just like any other custom hook. They must always be unconditionally called in the same order. -> **NOTE: In the event that you want to programmatically enable or disable plugin hooks, most of them provide options to disable their functionality, eg. `options.disableSorting`** +> **NOTE: In the event that you want to programmatically enable or disable plugin hooks, most of them provide options to disable their functionality, eg. `options.disableSortBy`** ### Option Memoization @@ -359,7 +359,7 @@ The following options are supported via the main options object passed to `useTa - Identical to the `state.sortBy` option above - `manualSorting: Bool` - Enables sorting detection functionality, but does not automatically perform row sorting. Turn this on if you wish to implement your own sorting outside of the table (eg. server-side or manual row grouping/nesting) -- `disableSorting: Bool` +- `disableSortBy: Bool` - Disables sorting for every column in the entire table. - `defaultCanSort: Bool` - Optional @@ -393,7 +393,7 @@ The following options are supported on any `Column` object passed to the `column - Optional - Defaults to `false` - If set to `true`, this column will be sortable, regardless if it has a valid `accessor` -- `disableSorting: Bool` +- `disableSortBy: Bool` - Optional - Defaults to `false` - If set to `true`, the sorting for this column will be disabled @@ -571,7 +571,7 @@ The following options are supported via the main options object passed to `useTa - `manualGroupBy: Bool` - Enables groupBy detection and functionality, but does not automatically perform row grouping. - Turn this on if you wish to implement your own row grouping outside of the table (eg. server-side or manual row grouping/nesting) -- `disableGrouping: Bool` +- `disableGroupBy: Bool` - Disables groupBy for the entire table. - `aggregations: Object` - Must be **memoized** @@ -591,7 +591,7 @@ The following options are supported on any `Column` object passed to the `column - Receives the table instance and cell model as props - 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` +- `disableGroupBy: Boolean` - Defaults to `false` - If `true`, will disable grouping for this column. diff --git a/index.d.ts b/index.d.ts index 4039b66..f26ca33 100644 --- a/index.d.ts +++ b/index.d.ts @@ -317,7 +317,7 @@ export namespace useGroupBy { export type UseGroupByOptions = Partial<{ manualGroupBy: boolean - disableGrouping: boolean + disableGroupBy: boolean aggregations: Record> groupByFn: ( rows: Array>, @@ -338,7 +338,7 @@ export interface UseGroupByState { export type UseGroupByColumnOptions = Partial<{ aggregate: Aggregator | Array> Aggregated: Renderer> - disableGrouping: boolean + disableGroupBy: boolean groupByBoundary: boolean }> @@ -513,7 +513,7 @@ export namespace useSortBy { export type UseSortByOptions = Partial<{ manualSorting: boolean - disableSorting: boolean + disableSortBy: boolean disableMultiSort: boolean isMultiSortEvent: (e: MouseEvent) => boolean maxMultiSortColCount: number @@ -538,7 +538,7 @@ export interface UseSortByState { } export type UseSortByColumnOptions = Partial<{ - disableSorting: boolean + disableSortBy: boolean sortDescFirst: boolean sortInverted: boolean sortType: SortByFn | DefaultSortTypes | string diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js index 3d080e9..e2f77df 100755 --- a/src/hooks/useTable.js +++ b/src/hooks/useTable.js @@ -1,5 +1,5 @@ import React from 'react' -import PropTypes from 'prop-types' + // import { applyHooks, @@ -12,16 +12,6 @@ import { determineHeaderVisibility, } from '../utils' -const propTypes = { - // General - data: PropTypes.array.isRequired, - columns: PropTypes.arrayOf(PropTypes.object).isRequired, - defaultColumn: PropTypes.object, - getSubRows: PropTypes.func, - getRowID: PropTypes.func, - debug: PropTypes.bool, -} - const renderErr = 'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.' @@ -34,9 +24,6 @@ const defaultGetSubRows = (row, index) => row.subRows || [] const defaultGetRowID = (row, index) => index export const useTable = (props, ...plugins) => { - // Validate props - PropTypes.checkPropTypes(propTypes, props, 'property', 'useTable') - // Destructure props let { data, diff --git a/src/plugin-hooks/useAbsoluteLayout.js b/src/plugin-hooks/useAbsoluteLayout.js index f521381..fb7b58b 100644 --- a/src/plugin-hooks/useAbsoluteLayout.js +++ b/src/plugin-hooks/useAbsoluteLayout.js @@ -1,7 +1,3 @@ -import PropTypes from 'prop-types' - -const propTypes = {} - export const useAbsoluteLayout = hooks => { hooks.useMain.push(useMain) } @@ -9,8 +5,6 @@ export const useAbsoluteLayout = hooks => { useAbsoluteLayout.pluginName = 'useAbsoluteLayout' const useMain = instance => { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useAbsoluteLayout') - const { totalColumnsWidth, hooks: { diff --git a/src/plugin-hooks/useBlockLayout.js b/src/plugin-hooks/useBlockLayout.js index 43f3453..2e974d4 100644 --- a/src/plugin-hooks/useBlockLayout.js +++ b/src/plugin-hooks/useBlockLayout.js @@ -1,7 +1,3 @@ -import PropTypes from 'prop-types' - -const propTypes = {} - export const useBlockLayout = hooks => { hooks.useMain.push(useMain) } @@ -9,8 +5,6 @@ export const useBlockLayout = hooks => { useBlockLayout.pluginName = 'useBlockLayout' const useMain = instance => { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useBlockLayout') - const { totalColumnsWidth, hooks: { getRowProps, getHeaderGroupProps, getHeaderProps, getCellProps }, diff --git a/src/plugin-hooks/useColumnOrder.js b/src/plugin-hooks/useColumnOrder.js index 0c872e9..90c9bbe 100644 --- a/src/plugin-hooks/useColumnOrder.js +++ b/src/plugin-hooks/useColumnOrder.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { addActions, actions } from '../actions' import { defaultState } from '../hooks/useTable' @@ -8,10 +7,6 @@ defaultState.columnOrder = [] addActions('setColumnOrder') -const propTypes = { - initialRowStateAccessor: PropTypes.func, -} - export const useColumnOrder = hooks => { hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => { return [...deps, instance.state.columnOrder] @@ -54,8 +49,6 @@ function columnsBeforeHeaderGroups(columns, instance) { } function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useColumnOrder') - const { setState } = instance const setColumnOrder = React.useCallback( diff --git a/src/plugin-hooks/useExpanded.js b/src/plugin-hooks/useExpanded.js index d774072..2457659 100755 --- a/src/plugin-hooks/useExpanded.js +++ b/src/plugin-hooks/useExpanded.js @@ -1,5 +1,4 @@ import { useMemo } from 'react' -import PropTypes from 'prop-types' import { mergeProps, applyPropHooks, expandRows } from '../utils' import { addActions, actions } from '../actions' @@ -9,11 +8,6 @@ defaultState.expanded = [] addActions('toggleExpanded', 'useExpanded') -const propTypes = { - manualExpandedKey: PropTypes.string, - paginateExpandedRows: PropTypes.bool, -} - export const useExpanded = hooks => { hooks.getExpandedToggleProps = [] hooks.useMain.push(useMain) @@ -22,8 +16,6 @@ export const useExpanded = hooks => { useExpanded.pluginName = 'useExpanded' function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useExpanded') - const { debug, rows, diff --git a/src/plugin-hooks/useFilters.js b/src/plugin-hooks/useFilters.js index 4182c7b..c2187c2 100755 --- a/src/plugin-hooks/useFilters.js +++ b/src/plugin-hooks/useFilters.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { getFirstDefined, isFunction } from '../utils' import * as filterTypes from '../filterTypes' @@ -10,17 +9,6 @@ defaultState.filters = {} addActions('setFilter', 'setAllFilters') -const propTypes = { - columns: PropTypes.arrayOf( - PropTypes.shape({ - disableFilters: PropTypes.bool, - Filter: PropTypes.any, - }) - ), - - manualFilters: PropTypes.bool, -} - export const useFilters = hooks => { hooks.useMain.push(useMain) } @@ -28,8 +16,6 @@ export const useFilters = hooks => { useFilters.pluginName = 'useFilters' function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useFilters') - const { debug, rows, diff --git a/src/plugin-hooks/useGroupBy.js b/src/plugin-hooks/useGroupBy.js index 5341b81..ddb2723 100755 --- a/src/plugin-hooks/useGroupBy.js +++ b/src/plugin-hooks/useGroupBy.js @@ -1,5 +1,4 @@ import { useMemo } from 'react' -import PropTypes from 'prop-types' import * as aggregations from '../aggregations' import { addActions, actions } from '../actions' @@ -16,27 +15,6 @@ defaultState.groupBy = [] addActions('toggleGroupBy') -const propTypes = { - // General - columns: PropTypes.arrayOf( - PropTypes.shape({ - aggregate: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.string, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - ), - ]), - disableGroupBy: PropTypes.bool, - Aggregated: PropTypes.any, - }) - ), - groupByFn: PropTypes.func, - manualGrouping: PropTypes.bool, - disableGroupBy: PropTypes.bool, - aggregations: PropTypes.object, -} - export const useGroupBy = hooks => { hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups) hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => { @@ -67,8 +45,6 @@ function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) { } function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useGroupBy') - const { debug, rows, @@ -92,14 +68,14 @@ function useMain(instance) { id, accessor, defaultGroupBy: defaultColumnGroupBy, - disableGroupBy: columnDisableGrouping, + disableGroupBy: columnDisableGroupBy, } = column column.isGrouped = groupBy.includes(id) column.groupedIndex = groupBy.indexOf(id) column.canGroupBy = accessor ? getFirstDefined( - columnDisableGrouping === true ? false : undefined, + columnDisableGroupBy === true ? false : undefined, disableGroupBy === true ? false : undefined, true ) diff --git a/src/plugin-hooks/usePagination.js b/src/plugin-hooks/usePagination.js index a7579c0..42d3258 100755 --- a/src/plugin-hooks/usePagination.js +++ b/src/plugin-hooks/usePagination.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' // import { addActions, actions } from '../actions' @@ -11,12 +10,6 @@ defaultState.pageIndex = 0 addActions('pageChange', 'pageSizeChange') -const propTypes = { - // General - manualPagination: PropTypes.bool, - paginateExpandedRows: PropTypes.bool, -} - export const usePagination = hooks => { hooks.useMain.push(useMain) } @@ -24,8 +17,6 @@ export const usePagination = hooks => { usePagination.pluginName = 'usePagination' function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'usePagination') - const { data, rows, diff --git a/src/plugin-hooks/useResizeColumns.js b/src/plugin-hooks/useResizeColumns.js index 377a01d..6aa21a6 100644 --- a/src/plugin-hooks/useResizeColumns.js +++ b/src/plugin-hooks/useResizeColumns.js @@ -1,5 +1,3 @@ -import PropTypes from 'prop-types' - // import { defaultState } from '../hooks/useTable' @@ -12,8 +10,6 @@ defaultState.columnResizing = { defaultColumn.canResize = true -const propTypes = {} - export const useResizeColumns = hooks => { hooks.useBeforeDimensions.push(useBeforeDimensions) } @@ -21,8 +17,6 @@ export const useResizeColumns = hooks => { useResizeColumns.pluginName = 'useResizeColumns' const useBeforeDimensions = instance => { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useResizeColumns') - instance.hooks.getResizerProps = [] const { diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js index 334a44d..f02d1c8 100644 --- a/src/plugin-hooks/useRowSelect.js +++ b/src/plugin-hooks/useRowSelect.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { mergeProps, @@ -14,10 +13,6 @@ defaultState.selectedRowPaths = [] addActions('toggleRowSelected', 'toggleRowSelectedAll') -const propTypes = { - manualRowSelectedKey: PropTypes.string, -} - export const useRowSelect = hooks => { hooks.getToggleRowSelectedProps = [] hooks.getToggleAllRowsSelectedProps = [] @@ -28,8 +23,6 @@ export const useRowSelect = hooks => { useRowSelect.pluginName = 'useRowSelect' function useRows(rows, instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useRowSelect') - const { state: { selectedRowPaths }, } = instance @@ -57,8 +50,6 @@ function useRows(rows, instance) { } function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useRowSelect') - const { hooks, manualRowSelectedKey = 'isSelected', diff --git a/src/plugin-hooks/useRowState.js b/src/plugin-hooks/useRowState.js index f26b259..a1a3201 100644 --- a/src/plugin-hooks/useRowState.js +++ b/src/plugin-hooks/useRowState.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { addActions, actions } from '../actions' import { defaultState } from '../hooks/useTable' @@ -8,10 +7,6 @@ defaultState.rowState = {} addActions('setRowState', 'setCellState') -const propTypes = { - initialRowStateAccessor: PropTypes.func, -} - export const useRowState = hooks => { hooks.useMain.push(useMain) } @@ -19,8 +14,6 @@ export const useRowState = hooks => { useRowState.pluginName = 'useRowState' function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useRowState') - const { hooks, rows, diff --git a/src/plugin-hooks/useSortBy.js b/src/plugin-hooks/useSortBy.js index c47e567..e361ea2 100755 --- a/src/plugin-hooks/useSortBy.js +++ b/src/plugin-hooks/useSortBy.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { ensurePluginOrder, defaultColumn } from '../utils' import { addActions, actions } from '../actions' @@ -19,26 +18,6 @@ defaultColumn.sortDescFirst = false addActions('sortByChange') -const propTypes = { - // General - columns: PropTypes.arrayOf( - PropTypes.shape({ - sortType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - sortDescFirst: PropTypes.bool, - disableSorting: PropTypes.bool, - }) - ), - orderByFn: PropTypes.func, - sortTypes: PropTypes.object, - manualSorting: PropTypes.bool, - disableSorting: PropTypes.bool, - disableMultiSort: PropTypes.bool, - isMultiSortEvent: PropTypes.func, - maxMultiSortColCount: PropTypes.number, - disableSortRemove: PropTypes.bool, - disableMultiRemove: PropTypes.bool, -} - export const useSortBy = hooks => { hooks.useMain.push(useMain) } @@ -46,8 +25,6 @@ export const useSortBy = hooks => { useSortBy.pluginName = 'useSortBy' function useMain(instance) { - PropTypes.checkPropTypes(propTypes, instance, 'property', 'useSortBy') - const { debug, rows, @@ -56,7 +33,7 @@ function useMain(instance) { sortTypes: userSortTypes, manualSorting, defaultCanSort, - disableSorting, + disableSortBy, disableSortRemove, disableMultiRemove, disableMultiSort, @@ -166,14 +143,14 @@ function useMain(instance) { const { accessor, canSort: defaultColumnCanSort, - disableSorting: columnDisableSorting, + disableSortBy: columnDisableSortBy, id, } = column const canSort = accessor ? getFirstDefined( - columnDisableSorting === true ? false : undefined, - disableSorting === true ? false : undefined, + columnDisableSortBy === true ? false : undefined, + disableSortBy === true ? false : undefined, true ) : getFirstDefined(defaultCanSort, defaultColumnCanSort, false)