Comparing established DataGrids

1 min readAugust 1, 2025Radu
View Mode
Fork
import "devextreme/dist/css/dx.dark.css";
import DataGrid, { Column } from "devextreme-react/data-grid";
import data from "@thedatagrid/data/olympics_10k";

const columns = ["Name", "Medal", "Sport", "Team", "Year", "Season"];

const App = () => (
  <DataGrid
    dataSource={data}
    keyExpr="Id"
    defaultColumns={columns}
    showBorders={true}
    style={{ height: "100%" }}
  >
    {columns.map((column, index) => (
      <Column dataField={column} key={index} />
    ))}
  </DataGrid>
);

export default App;

For more content like this, follow us on at @thedatagrid