Infinite Table vs react-data-grid

import { useMemo, useState } from 'react';
import { DataGrid } from 'react-data-grid';
import type { Column, SortColumn } from 'react-data-grid';
import 'react-data-grid/lib/styles.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: Column<Car>[] = [
  { key: 'make', name: 'Make', sortable: true },
  { key: 'model', name: 'Model', width: 200, sortable: true },
  { key: 'price', name: 'Price', renderCell: ({ row }) => <b>{row.price}</b> },
];

export function Cars() {
  const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([
    { columnKey: 'make', direction: 'ASC' },
  ]);

  // the grid shows the sort state; sorting the rows is up to you
  const rows = useMemo(() => {
    const [sort] = sortColumns;
    if (!sort) return data;
    const key = sort.columnKey as keyof Car;
    const sorted = [...data].sort((a, b) =>
      String(a[key]).localeCompare(String(b[key]), undefined, { numeric: true }),
    );
    return sort.direction === 'DESC' ? sorted.reverse() : sorted;
  }, [sortColumns]);

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      sortColumns={sortColumns}
      onSortColumnsChange={setSortColumns}
      style={{ 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>