[Proposal] Incorporate TableWrapper from examples into Table component

[thgaskell]

When the Table component was created, the initial goal was to generate HTML markup that is 508 compliant, while allowing developers the ability to use those pieces in ways deemed fit for their application, including features like sorting and pagination.

This led to the existing table example that demonstrated how it could be used leveraging a global TableWrapper context.

While informative in showing how the features can be used, also led to developers needing to implement their own TableWrapper component in addition to importing the component pieces from the React component library.

It's been apparent from initial feedback and discussions that the table component should be simpler to use without needing to instantiate a table context in addition to constructing the table.

---

Proposed Usage

Allow developers to provide their data, and well as describe how to access and display values. If no child components are provided to the component, the library should fallback to a default rendering view.

Table.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired,    // The table data
  columns: PropTypes.arrayOf(PropTypes.shape({             // Column definitions
    key: PropTypes.string.isRequired,                      // Key for the data field
    label: PropTypes.string.isRequired,                    // Column header label
    sortable: PropTypes.bool,                              // Indicates if the column is sortable
    hidden: PropTypes.bool                                 // Indicates if the column should be hidden
  })).isRequired,
  onSort: PropTypes.func,                                  // Callback function for sorting
  paginationComponent: PropTypes.element,                  // Custom pagination component
  paginationOptions: PropTypes.shape({                     // Options for pagination
    pageSize: PropTypes.number,
    currentPage: PropTypes.number,
    onPageChange: PropTypes.func                           // Callback function when page changes
  })
};

Simple

import { Table } from '@nmfs-radfish/react-radfish';

<Table 
  data={[
    { id: 1, name: 'Alice', age: 32 },
    { id: 2, name: 'Bob', age: 28 }
  ]}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'age', label: 'Age', sortable: true, hidden: false }
  ]}
/>

Pagination Support

Additionally, the Table component should support pagination if requested by the developer.

import { Table } from '@nmfs-radfish/react-radfish';

<Table 
  data={[
    { id: 1, name: 'Alice', age: 32 },
    { id: 2, name: 'Bob', age: 28 }
  ]}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'age', label: 'Age', sortable: true, hidden: false }
  ]}
  paginationOptions={{
    pageSize: 5,
    currentPage: 1,
    onPageChange: (newPage) => console.log(`Page changed to ${newPage}`)
  }}
/>