Rename disableGrouping, remove propTypes, update Readme

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
 

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
 

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<aggregationKey: aggregationFn>`
   - 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.
 

index.d.ts

@@ -317,7 +317,7 @@ export namespace useGroupBy {
 
 export type UseGroupByOptions<D extends object> = Partial<{
   manualGroupBy: boolean
-  disableGrouping: boolean
+  disableGroupBy: boolean
   aggregations: Record<string, AggregatorFn<D>>
   groupByFn: (
     rows: Array<Row<D>>,
@@ -338,7 +338,7 @@ export interface UseGroupByState<D extends object> {
 export type UseGroupByColumnOptions<D extends object> = Partial<{
   aggregate: Aggregator<D> | Array<Aggregator<D>>
   Aggregated: Renderer<CellProps<D>>
-  disableGrouping: boolean
+  disableGroupBy: boolean
   groupByBoundary: boolean
 }>
 
@@ -513,7 +513,7 @@ export namespace useSortBy {
 
 export type UseSortByOptions<D extends object> = Partial<{
   manualSorting: boolean
-  disableSorting: boolean
+  disableSortBy: boolean
   disableMultiSort: boolean
   isMultiSortEvent: (e: MouseEvent) => boolean
   maxMultiSortColCount: number
@@ -538,7 +538,7 @@ export interface UseSortByState<D extends object> {
 }
 
 export type UseSortByColumnOptions<D extends object> = Partial<{
-  disableSorting: boolean
+  disableSortBy: boolean
   sortDescFirst: boolean
   sortInverted: boolean
   sortType: SortByFn<D> | DefaultSortTypes | string

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,

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: {

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 },

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(

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,

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,

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
         )

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,

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 {

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',

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,

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)