Add a DataGrid component

[McManning]

Need a new DataGrid that checks all the a11y boxes we need to check, as well as features.

Features required:

• Easy API for React beginners, a11y-by-default
• Column sorting
• Pagination that can be toggled on (but not on by default)
• Lazy loading
• Export to CSV / Excel / etc
• Horizontal scrolling with locked columns (see: PI Portal grants/awards/etc tables)
• Expandable rows (see: PI Portal invoicing, payroll)

Nice to have features but we don't need for most use cases:

• Row windowing
• Searching / filtering within columns (typically we write external components for this, but a built in solution would also be nice if it checks the boxes of all the use cases we have)
• Full screen "spreadsheet view" (see: PI Portal)
• Row grouping (see: PI Portal invoicing, expenditures) with group filtering

[McManning]

The API for PI Portal's data grids is probably the easiest API for our use cases (imo). Looks something like:

 <Spreadsheet
      ref={dt}
      title={title}
      open={showDetails}
      onClose={() => setShowDetails(false)}
      onChange={(rows) => setFiltered(rows)}
      rows={transactions}
      onExport={() => grant && exportExpenditures(grant, filtered)}
      loading={false}
      error={undefined}
    >
      <DateColumn field="date" header="Date" />
      <Column
        field="budget"
        header="Budget"
        sortable
        headerStyle={{ width: 150 }}
        filter
        filterElement={budgetFilter}
        body={(row: LineItem) => BudgetName[row.budget]}
      />
      <Column
        field="objectClass"
        header="Object Class"
        sortable
        headerStyle={{ width: 250 }}
        filter
        filterElement={objectClassFilter}
      />
      <NameColumn field="account" header="Account" />
      <NameColumn field="vendor" header="Vendor" />
      <NameColumn field="description" header="Description" />

      {grant?.source === DataSource.Workday && (
        <NameColumn field="spendCategory" header="Spend Category" />
      )}

      {grant?.source === DataSource.Workday && (
        <IDColumn field="treatment" header="Treatment" />
      )}

      <IDColumn field="po" header="PO" />
      <NameColumn field="voucher" header="Voucher" body={VoucherLink} />
      <MoneyColumn
        field="amount"
        header="Amount"
        footer={() => <Money value={totalAmount} />}
      />

      <Column
        style={{ width: '3em ' }}
        body={(row) => <ExpenditureContact lineItem={row} />}
      />
</Spreadsheet>

I establish some standardized data format columns that will format for us (e.g. monetary value formatting for negative values, specific column widths based on long content types, etc) and provide overrides to render custom content in per row.

This is loosely based around PrimeReact's data tables API, but simplified even further based on an expected data format.