How to use the react-table.prototype function in react-table

To help you get started, we’ve selected a few react-table examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github glin / reactable / srcjs / Reactable.js View on Github external
if (JSON.stringify(this.props[name]) === JSON.stringify(newProps[name])) {
      newProps[name] = this.props[name]
    }
  })
  // Reset search value if searchable changes
  if (this.props.searchable !== newProps.searchable) {
    newProps.filtered = this.state.filtered.filter(filter => filter.id !== this.props.searchKey)
  }
  return this.oldComponentWillReceiveProps(newProps, newState)
}

// Add global table searching. react-table doesn't support a global filter,
// so we use a dummy column to efficiently filter all columns. Because filters
// are only applied for visible (show = true) columns, we pass the dummy column
// directly to filterData to avoid having to hide the column.
ReactTable.prototype.oldFilterData = ReactTable.prototype.filterData
ReactTable.prototype.filterData = function(data, filtered, defaultFilterMethod, allVisibleColumns) {
  let filterColumns = allVisibleColumns
  if (this.props.searchable) {
    // Exclude unfilterable columns (e.g. selection columns)
    const searchableColumns = allVisibleColumns.filter(col => col.createMatcher)
    const searchColumn = {
      id: this.props.searchKey,
      filterAll: true,
      filterable: true,
      filterMethod: (filter, rows) => {
        if (!filter.value) {
          return rows
        }

        const matchers = searchableColumns.reduce((obj, col) => {
          obj[col.id] = col.createMatcher(filter.value)
github glin / reactable / srcjs / Reactable.js View on Github external
// By default, the loading text is always present and read by screen readers, even
// when hidden. Hide the loading text completely to prevent it from being read.
const DefaultLoadingComponent = ReactTableDefaults.LoadingComponent
Object.assign(ReactTableDefaults, {
  LoadingComponent({ loading, ...rest }) {
    return loading ? DefaultLoadingComponent({ loading, ...rest }) : null
  }
})

ReactTable.propTypes = fixedReactTablePropTypes

// Prevent unnecessary data updates on table rerenders by doing a deep comparison
// of data props rather than a === comparison. Kind of ugly, but significantly
// increases performance when selecting or expanding rows in a very large table.
ReactTable.prototype.oldComponentWillReceiveProps = ReactTable.prototype.componentWillReceiveProps
ReactTable.prototype.componentWillReceiveProps = function(newProps, newState) {
  newProps = { ...newProps }
  if (this.props.dataKey && this.props.dataKey === newProps.dataKey) {
    newProps.data = this.props.data
    newProps.columns = this.props.columns
  }
  const dataUpdateProps = ['pivotBy', 'sorted', 'filtered']
  dataUpdateProps.forEach(name => {
    if (JSON.stringify(this.props[name]) === JSON.stringify(newProps[name])) {
      newProps[name] = this.props[name]
    }
  })
  // Reset search value if searchable changes
  if (this.props.searchable !== newProps.searchable) {
    newProps.filtered = this.state.filtered.filter(filter => filter.id !== this.props.searchKey)
  }
github glin / reactable / srcjs / Reactable.js View on Github external
// By default, the loading text is always present and read by screen readers, even
// when hidden. Hide the loading text completely to prevent it from being read.
const DefaultLoadingComponent = ReactTableDefaults.LoadingComponent
Object.assign(ReactTableDefaults, {
  LoadingComponent({ loading, ...rest }) {
    return loading ? DefaultLoadingComponent({ loading, ...rest }) : null
  }
})

ReactTable.propTypes = fixedReactTablePropTypes

// Prevent unnecessary data updates on table rerenders by doing a deep comparison
// of data props rather than a === comparison. Kind of ugly, but significantly
// increases performance when selecting or expanding rows in a very large table.
ReactTable.prototype.oldComponentWillReceiveProps = ReactTable.prototype.componentWillReceiveProps
ReactTable.prototype.componentWillReceiveProps = function(newProps, newState) {
  newProps = { ...newProps }
  if (this.props.dataKey && this.props.dataKey === newProps.dataKey) {
    newProps.data = this.props.data
    newProps.columns = this.props.columns
  }
  const dataUpdateProps = ['pivotBy', 'sorted', 'filtered']
  dataUpdateProps.forEach(name => {
    if (JSON.stringify(this.props[name]) === JSON.stringify(newProps[name])) {
      newProps[name] = this.props[name]
    }
  })
  // Reset search value if searchable changes
  if (this.props.searchable !== newProps.searchable) {
    newProps.filtered = this.state.filtered.filter(filter => filter.id !== this.props.searchKey)
  }
  return this.oldComponentWillReceiveProps(newProps, newState)
github glin / reactable / srcjs / Reactable.js View on Github external
newProps[name] = this.props[name]
    }
  })
  // Reset search value if searchable changes
  if (this.props.searchable !== newProps.searchable) {
    newProps.filtered = this.state.filtered.filter(filter => filter.id !== this.props.searchKey)
  }
  return this.oldComponentWillReceiveProps(newProps, newState)
}

// Add global table searching. react-table doesn't support a global filter,
// so we use a dummy column to efficiently filter all columns. Because filters
// are only applied for visible (show = true) columns, we pass the dummy column
// directly to filterData to avoid having to hide the column.
ReactTable.prototype.oldFilterData = ReactTable.prototype.filterData
ReactTable.prototype.filterData = function(data, filtered, defaultFilterMethod, allVisibleColumns) {
  let filterColumns = allVisibleColumns
  if (this.props.searchable) {
    // Exclude unfilterable columns (e.g. selection columns)
    const searchableColumns = allVisibleColumns.filter(col => col.createMatcher)
    const searchColumn = {
      id: this.props.searchKey,
      filterAll: true,
      filterable: true,
      filterMethod: (filter, rows) => {
        if (!filter.value) {
          return rows
        }

        const matchers = searchableColumns.reduce((obj, col) => {
          obj[col.id] = col.createMatcher(filter.value)
          return obj