One Table — Infinite Applications

Not Found

Comparison of React DataGrids#

DevExtreme Data Grid#

Sandpack deps="devextreme-react,devextreme">
// import DataGrid, {
//   Column,
//   GroupPanel,
//   Scrolling,
//   // @ts-ignore
// } from 'devextreme-react/data-grid';
// import React from 'react';

// import { columns, COLUMN_WIDTH } from './columns';

// const url = 'https://data.infinite-table.com' + '/developers10k';

// let groupIndex = 0;

// class App extends React.Component {
//   render() {
//     return (
//       // @ts-ignore
//       <DataGrid
//         allowColumnResizing
//         allowColumnReordering
//         style={{
//           height: 600,
//           maxHeight: 'calc(100vh - 10px)',
//         }}
//         dataSource={url}
//         keyExpr="id"
//         showBorders={true}
//         columnWidth={COLUMN_WIDTH}
//       >
//         <GroupPanel />
//         <Scrolling mode="virtual" columnRenderingMode="virtual" />
//         {columns.map((column, index) => {
//           const columnProps: React.ComponentProps<typeof Column> = {
//             dataField: column.field,
//             calculateCellValue: column.getValue,
//             caption: column.header,
//           };

//           if (column.group) {
//             columnProps.groupIndex = groupIndex;
//             groupIndex += 1;
//           }

//           return <Column key={index} {...columnProps} />;
//         })}
//       </DataGrid>
//     );
//   }
// }

// export default App;

export {};
<!DOCTYPE html>
<html>
  <head>
    <title>DevExtreme Demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn3.devexpress.com/jslib/21.2.6/css/dx.common.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn3.devexpress.com/jslib/21.2.6/css/dx.light.css"
    />
  </head>

  <body class="dx-viewport">
    <div class="demo-container">
      <div id="root"></div>
    </div>
  </body>
</html>
/**
 * Devexpress row hight cannot be changed only with css.
 */
export const ROW_HEIGHT = 34;
export const COLUMN_WIDTH = 150;
export const COLUMN_GROUP_WIDTH = 150;

const getRandomColumns = (numberOfCOlumns: number) => {
  return Array(numberOfCOlumns)
    .fill(0)
    .map((_, index) => {
      return {
        field: `Gen Col. ${index}`,
        getValue: () => index,
      };
    });
};

export const columns: {
  field?: string;
  getValue?: (data: any) => any;
  header?: string;
  group?: boolean;
}[] = [
  { field: 'firstName' },
  { field: 'lastName' },
  { field: 'country' },
  { field: 'city', group: true },
  { field: 'currency' },
  { field: 'preferredLanguage' },
  { field: 'stack' },
  { field: 'canDesign' },
  { field: 'hobby' },
  { field: 'salary' },
  { field: 'age' },
  { field: 'streetName' },
  { field: 'streetNo' },
  { field: 'streetPrefix' },
  {
    header: 'Full Name',
    getValue: (data: any) => `${data.firstName} ${data.lastName}`,
  },
  {
    header: 'Full Address',
    getValue: (data: any) =>
      `${data.streetName} ${data.streetNo} ${data.streetPrefix}`,
  },
  ...getRandomColumns(100),
];
Sandpack

AG Grid#

Sandpack deps="ag-grid-community,ag-grid-react,ag-grid-enterprise"
`tsx file="aggrid.page.tsx"
`
`ts file="columns.ts"
`
Sandpack

Infinite Table#

Sandpack
`tsx file="infinite.page.tsx"
`
`ts file="columns.ts"
`
Sandpack