How to use react-table - 10 common examples

getTableBodyProps,
    headerGroups,
    rows,
    page,
    flatColumns,
    prepareRow,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize /* expanded */ },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 },
    },
    useSortBy,
    useRowSelect,
    useExpanded,
    usePagination,
  );

  function SubTrComponent({ row, isExpanded }: any) {
    if (!isExpanded) return null;
    return (

// Use the state and functions returned from useTable to build your UI

  const defaultColumn = React.useMemo(
    () => ({
      width: 150,
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
    },
    useAbsoluteLayout
  )

  // Render the UI for your table
  return (
    <div>
      <div>
        {headerGroups.map(headerGroup =&gt; (
          </div></div>

function Table({ columns: userColumns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { expanded },
  } = useTable(
    {
      columns: userColumns,
      data,
    },
    useExpanded // Use the useExpanded plugin hook
  )

  return (
    <>
      
          {headerGroups.map(headerGroup => (
            
              {headerGroup.headers.map(column => (
                
              ))}<table>
        <thead><tr><th>{column.render('Header')}</th></tr></thead></table>

function Table({columns, data}) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    });

    // Render the UI for your table
    return (
        
            {headerGroups.map(headerGroup => (
                
                    {headerGroup.headers.map(column => (
                        
                    ))}
                
            ))}
            <table>
            <thead><tr><th>{column.render('Header')}</th></tr></thead></table>

Filter: DefaultColumnFilter,
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    flatColumns,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable(
    {
      columns,
      data,
      defaultColumn, // Be sure to pass the defaultColumn option
      filterTypes,
    },
    useFilters, // useFilters!
    useGlobalFilter // useGlobalFilter!
  )

  // We don't want to render all of the rows for this example, so cap
  // it for this use case
  const firstPageRows = rows.slice(0, 10)

  return (
    <>

headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page,
    // which has only the rows for the active page

    // The rest of these things are super handy, too ;)
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize, groupBy, expanded, filters, selectedRowIds },
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      filterTypes,
      // nestExpandedRows: true,
      initialState: { pageIndex: 2 },
      // updateMyData isn't part of the API, but
      // anything we put into these options will
      // automatically be available on the instance.
      // That way we can call this function from our
      // cell renderer!
      updateMyData,
      // We also need to pass this so the page doesn't change
      // when we edit the data, undefined means using the default
      autoResetPage: !skipPageReset,

: true
        })
      },
    }),
    []
  )

  const defaultColumn = React.useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: DefaultColumnFilter,
    }),
    []
  )

  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
      defaultColumn, // Be sure to pass the defaultColumn option
      filterTypes,
    },
    useFilters,
    usePagination
  )

  // We don't want to render all 2000 rows for this example, so cap
  // it at 20 for this use case
  const firstPageRows = rows.slice(0, 20)

  const messageContent = cell => {
    return (

className="icon"
      onClick={showKernelSpec.bind(this, kernelSpec)}
      title="Show kernel spec"
      key={displayName + "kernelInfo"}
    >
      {displayName}
    
  );
};

// Set default properties of React-Table
Object.assign(ReactTableDefaults, {
  className: "kernel-monitor",
  showPagination: false
});
Object.assign(ReactTableDefaults.column, {
  className: "table-cell",
  headerClassName: "table-header",
  style: { textAlign: "center" }
});

const KernelMonitor = observer(({ store }: { store: store }) => {
  if (store.runningKernels.length === 0) {
    return (
      <ul>
        <li>No running kernels</li>
      </ul>
    );
  }

  const data = _.map(store.runningKernels, (kernel, key: number) =&gt; {
    return {

import React, { PureComponent } from 'react'

import ReactTable, { ReactTableDefaults } from 'react-table'

import 'react-table/react-table.css'
// $FlowFixMe
import './DataTable.scss'

import { Box } from 'grommet/components/Box'
import { Text } from 'grommet/components/Text'

import { GetDataEventOption } from '../../../model/NodeEditor'

// https://github.com/tannerlinsley/react-table/issues/730
const columnDefaults = { ...ReactTableDefaults.column, headerClassName: 'datatable-header' }

import type { PlainDataframe, NodeEditorContext } from '../../../../common/model/flowtypes.js'
import type { EventEmitter3 } from 'eventemitter3'

type Props = {
  uncontrolled: boolean,
  pagination: boolean,
  pageSize: number,
  context: NodeEditorContext,
  ee: EventEmitter3,

  caption: string,
  value: PlainDataframe,

  onChange: (any)=>void,
  onError: (title:string, level:string, error: Error)=>void,

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)