VirtualTable

const [data, setData] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const basicColumnDef = [
  {
    header: "FirstName",
    accessorKey: "name.first",
    size: 150,
  },
  {
    header: "LastName",
    accessorKey: "name.last",
    size: 150,
  },
  {
    header: "Age",
    accessorKey: "dob.age",
    size: 80,
  },
  {
    header: "Phone",
    accessorKey: "phone",
    size: 200,
  },
  {
    header: "Country",
    accessorKey: "location.country",
    size: 150,
  },
];
React.useEffect(() => {
  fetch("https://randomuser.me/api/?results=200")
    .then((response) => response.json())
    .then((data) => {
      setData(data.results);
      setLoading(false);
    })
    .catch((error) => {
      console.log(error);
      setLoading(false);
    });
}, []);
const columns = React.useMemo(() => basicColumnDef, []);
if (loading) {
  return (
    <Box className="flex justify-center w-full p-4 h-[200px]">
      <Box className="flex flex-col items-center justify-center">
        <Loading size="48" />
      </Box>
    </Box>
  );
}
return (
  <Box className="flex align-center justify-center">
    <VirtualTable
      columns={columns}
      data={data}
      rowHeight={40}
      containerHeight={350}
      overscanRowCount={8}
    />
  </Box>
);

const [data, setData] = React.useState([]);
const [virtualizer, setVirtualizer] = React.useState(null);
const [scrollIndex, setScrollIndex] = React.useState(null);
const [loading, setLoading] = React.useState(true);

const isSafari = /^((?!chrome|android).)*safari/i.test(typeof navigator !== "undefined" ? navigator.userAgent : "");

React.useEffect(() => {
  fetch("https://randomuser.me/api/?results=200")
    .then((response) => response.json())
    .then((data) => {
      setData(data.results);
      setLoading(false);
    })
    .catch((error) => {
      console.log(error);
      setLoading(false);
    });
}, []);

const basicColumnDef = [
  {
    header: "FirstName",
    accessorKey: "name.first",
    size: 150,
  },
  {
    header: "LastName",
    accessorKey: "name.last",
    size: 150,
  },
  {
    header: "Age",
    accessorKey: "dob.age",
    size: 80,
  },
  {
    header: "Phone",
    accessorKey: "phone",
    size: 200,
  },
  {
    header: "Country",
    accessorKey: "location.country",
    size: 150,
  },
];
const columns = React.useMemo(() => basicColumnDef, []);
const handleScroll = () => {
  const randomIndex = Math.floor(Math.random() * data.length);
  setScrollIndex(randomIndex); // Update state to show in button

  virtualizer?.scrollToIndex(randomIndex, {
    align: "center",
    behavior: isSafari ? "auto" : "smooth",
  });
};
if (loading) {
  return (
    <Box className="flex justify-center w-full p-4 h-[200px]">
      <Loading size="48" />
    </Box>
  );
}
return (
  <Box className="flex flex-col items-center gap-4 w-full">
    <Button onClick={handleScroll}>
      {scrollIndex !== null
        ? `Scroll to Row ${scrollIndex}`
        : "Scroll to a Random Row"}
    </Button>
    <VirtualTable
      columns={columns}
      data={data}
      rowHeight={40}
      containerHeight={350}
      overscanRowCount={8}
      onVirtualizerReady={(v) => setVirtualizer(v)}
    />
  </Box>
);

const firstNames = ["Torie", "Kordula", "Vikki", "Burnaby", "Teddie"];

const userList = React.useMemo(
  () =>
    Array.from({ length: 200 }, (_, index) => ({
      id: index + 1,
      first_name: firstNames[index % firstNames.length],
      last_name: `Row ${index + 1}`,
      age: 20 + (index % 45),
    })),
  []
);

const basicColumnDef = [
  { header: "Id", accessorKey: "id", size: 80 },
  { header: "First Name", accessorKey: "first_name", size: 150 },
  { header: "Last Name", accessorKey: "last_name", size: 150 },
  { header: "Age", accessorKey: "age", size: 80 },
];

const [selectedRowIds, setSelectedRowIds] = React.useState([]);

const columns = React.useMemo(() => basicColumnDef, []);

return (
  <Box className="flex flex-col gap-2">
    <Text className="text-body-14">
      {selectedRowIds.length > 0
        ? `Selected ${selectedRowIds.length} row(s): ${selectedRowIds
            .slice(0, 10)
            .join(", ")}${selectedRowIds.length > 10 ? "…" : ""}`
        : "No rows selected"}
    </Text>
    <VirtualTable
      columns={columns}
      containerHeight={350}
      data={userList}
      getRowId={(row) => String(row.id)}
      role="grid"
      rowHeight={40}
      rowSelection={{
        mode: "multiple",
        selectedRowIds: selectedRowIds,
        onRowSelectionChange: setSelectedRowIds,
        getRowLabel: (row) => `Select ${row.first_name} ${row.last_name}`,
      }}
    />
  </Box>
);

const firstNames = ["Torie", "Kordula", "Vikki", "Burnaby", "Teddie"];

const userList = React.useMemo(
  () =>
    Array.from({ length: 200 }, (_, index) => ({
      id: index + 1,
      first_name: firstNames[index % firstNames.length],
      last_name: `Row ${index + 1}`,
      age: 20 + (index % 45),
      email: `${firstNames[index % firstNames.length].toLowerCase()}.${
        index + 1
      }@example.com`,
    })),
  []
);

const basicColumnDef = [
  { header: "Id", accessorKey: "id", size: 80 },
  { header: "First Name", accessorKey: "first_name", size: 150 },
  { header: "Last Name", accessorKey: "last_name", size: 150 },
  { header: "Age", accessorKey: "age", size: 80 },
  { header: "Email", accessorKey: "email", size: 220 },
];

// Columns omitted default to true(visible)
const [columnVisibility, setColumnVisibility] = React.useState({
  id: true,
  first_name: true,
  last_name: true,
  age: false,
});

const toggleColumn = (columnId) =>
  setColumnVisibility((prev) => ({
    ...prev,
    [columnId]: prev[columnId] === false,
  }));

const columns = React.useMemo(() => basicColumnDef, []);
// id column can't be hidden
const hideableColumns = basicColumnDef.filter(
  (col) => col.accessorKey !== "id"
);

return (
  <Box className="flex flex-col gap-2">
    <Stack className="gap-4">
      {hideableColumns.map((column) => (
        <Toggle
          key={column.accessorKey}
          label={`Hide "${column.header}" column`}
          checked={columnVisibility[column.accessorKey] === false}
          onChange={() => toggleColumn(column.accessorKey)}
        />
      ))}
    </Stack>
    <VirtualTable
      columns={columns}
      columnVisibility={{
        state: columnVisibility,
        onChange: setColumnVisibility,
      }}
      containerHeight={350}
      data={userList}
      rowHeight={40}
    />
  </Box>
);

const firstNames = ["Torie", "Kordula", "Vikki", "Burnaby", "Teddie"];

const [data, setData] = React.useState(() =>
  Array.from({ length: 200 }, (_, index) => ({
    id: index + 1,
    first_name: firstNames[index % firstNames.length],
    email: `${firstNames[index % firstNames.length].toLowerCase()}.${
      index + 1
    }@example.com`,
    age: 20 + (index % 45),
  }))
);

const columnsDef = [
  // Read-only column: stays plain text even in edit mode.
  { header: "Id", accessorKey: "id", size: 80, meta: { editable: false } },
  {
    header: "First Name",
    accessorKey: "first_name",
    size: 160,
    meta: {
      // Blocks the commit until valid; announced to assistive tech.
      validate: (value) =>
        String(value).trim().length < 2 ? "Min 2 characters" : undefined,
      // Strip anything that is not a letter, space, or hyphen as it is typed.
      onChange: (event) => event.target.value.replace(/[^A-Za-z\s-]/g, ""),
      // Accessible label override for the input.
      label: "First name",
    },
  },
  {
    header: "Email",
    accessorKey: "email",
    size: 240,
    meta: {
      validate: (value) =>
        String(value).includes("@") ? undefined : "Must be a valid email",
    },
  },
  {
    header: "Age",
    accessorKey: "age",
    size: 100,
    meta: {
      inputType: "number",
      // Digits only.
      onChange: (event) => event.target.value.replace(/\D/g, ""),
      validate: (value) =>
        Number(value) > 0 ? undefined : "Must be greater than 0",
    },
  },
];

const columns = React.useMemo(() => columnsDef, []);

return (
  <VirtualTable
    columns={columns}
    containerHeight={350}
    data={data}
    editMode
    getRowId={(row) => String(row.id)}
    role="grid"
    rowHeight={40}
    onCellValueUpdate={(rowId, columnId, value) => {
      setData((prev) =>
        prev.map((row) =>
          String(row.id) === rowId ? { ...row, [columnId]: value } : row
        )
      );
    }}
  />
);