Infinite Table vs Glide Data Grid

import { DataEditor, GridCellKind } from '@glideapps/glide-data-grid';
import type { GridCell, GridColumn, Item } from '@glideapps/glide-data-grid';
import '@glideapps/glide-data-grid/dist/index.css';

type Car = { id: number; make: string; model: string; price: number };

const data: Car[] = [
  { id: 1, make: 'Tesla', model: 'Model Y', price: 64950 },
  { id: 2, make: 'Ford', model: 'F-Series', price: 33850 },
];

const columns: GridColumn[] = [
  { title: 'Make', id: 'make' },
  { title: 'Model', id: 'model', width: 200 },
  { title: 'Price', id: 'price' },
];
const keys = ['make', 'model', 'price'] as const;

// sorting is up to you: sort the data before giving it to the grid
const rows = [...data].sort((a, b) => a.make.localeCompare(b.make));

function getCellContent([col, row]: Item): GridCell {
  const value = String(rows[row][keys[col]]);
  return {
    kind: GridCellKind.Text,
    data: value,
    displayData: value,
    allowOverlay: false,
  };
}

export function Cars() {
  return (
    <DataEditor
      columns={columns}
      rows={rows.length}
      getCellContent={getCellContent}
      height={500}
    />
  );
}

import { DataSource, InfiniteTable } from '@infinite-table/infinite-react';
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
import '@infinite-table/infinite-react/index.css';

type Car = { id: number; make: string; model: string; price: number };

const data: Car[] = [
  { id: 1, make: 'Tesla', model: 'Model Y', price: 64950 },
  { id: 2, make: 'Ford', model: 'F-Series', price: 33850 },
];

const columns: InfiniteTablePropColumns<Car> = {
  make: { field: 'make', header: 'Make' },
  model: { field: 'model', header: 'Model', defaultWidth: 200 },
  price: {
    field: 'price',
    header: 'Price',
    renderValue: ({ value }) => <b>{value}</b>,
  },
};

export function Cars() {
  return (
    <div style={{ height: 500, display: 'flex' }}>
      <DataSource<Car>
        primaryKey="id"
        data={data}
        defaultSortInfo={{ field: 'make', dir: 1 }}
      >
        <InfiniteTable<Car> columns={columns} />
      </DataSource>
    </div>