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

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 (

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize }
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 }
    },
    useSortBy,
    usePagination
  );

  return (
    <div>
      
          {headerGroups.map(headerGroup =&gt; (
            
              {headerGroup.headers.map(column =&gt; (<table>
        <thead><tr></tr></thead></table></div>

function Table({ data }) {
  const now = new Date();
  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
      initialState: tableState,
      autoResetSortBy: false
    },
    useSortBy
  );
  return (
    <div>
      <div>
        {headerGroups.map(headerGroup =&gt; (
          <div>
            {headerGroup.headers.map(column =&gt; (
              </div></div></div>

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    flatColumns,
    prepareRow,
    setColumnOrder,
    state,
  } = useTable(
    {
      columns,
      data,
    },
    useColumnOrder
  )

  const randomizeColumns = () => {
    setColumnOrder(shuffle(flatColumns.map(d => d.id)))
  }

  return (
    <>
      <button> randomizeColumns({})}&gt;Randomize Columns</button>
      <table>
        <thead></thead></table>