Improve Grid imperative API example

Author: bvaughn

generated/examples/CellComponent.example.jsx

@@ -1,23 +1,6 @@
 function CellComponent({ contacts, columnIndex, rowIndex, style }) {
-  // Column and header rows shown for example purposes; (they aren't required)
-  if (columnIndex === 0 && rowIndex === 0) {
-    return null;
-  } else if (rowIndex === 0) {
-    return (
-      <div className="text-sm font-bold" style={style}>
-        Column {columnIndex}
-      </div>
-    );
-  } else if (columnIndex === 0) {
-    return (
-      <div className="text-sm font-bold" style={style}>
-        Row {rowIndex}
-      </div>
-    );
-  }
-
-  const address = contacts[rowIndex - 1];
-  const content = address[indexToColumn(columnIndex - 1)];
+  const address = contacts[rowIndex];
+  const content = address[indexToColumn(columnIndex)];
 
   return (
     <div className="truncate" style={style}>

generated/examples/CellComponent.example.tsx

@@ -4,25 +4,8 @@ function CellComponent({
   rowIndex,
   style,
 }: GridComponentProps<CellProps>) {
-  // Column and header rows shown for example purposes; (they aren't required)
-  if (columnIndex === 0 && rowIndex === 0) {
-    return null;
-  } else if (rowIndex === 0) {
-    return (
-      <div className="text-sm font-bold" style={style}>
-        Column {columnIndex}
-      </div>
-    );
-  } else if (columnIndex === 0) {
-    return (
-      <div className="text-sm font-bold" style={style}>
-        Row {rowIndex}
-      </div>
-    );
-  }
-
-  const address = contacts[rowIndex - 1];
-  const content = address[indexToColumn(columnIndex - 1)];
+  const address = contacts[rowIndex];
+  const content = address[indexToColumn(columnIndex)];
 
   return (
     <div className="truncate" style={style}>

generated/examples/Grid.example.jsx

@@ -5,11 +5,9 @@ function Example({ contacts }) {
     <Grid
       cellComponent={CellComponent}
       cellProps={{ contacts }}
-      columnCount={11}
+      columnCount={10}
       columnWidth={columnWidth}
-      rowCount={
-        contacts.length + 1 // Extra header row
-      }
+      rowCount={contacts.length}
       rowHeight={25}
     />
   );

generated/examples/Grid.example.tsx

@@ -9,11 +9,9 @@ function Example({ contacts }: { contacts: Contact[] }) {
     <Grid
       cellComponent={CellComponent}
       cellProps={{ contacts }}
-      columnCount={11}
+      columnCount={10}
       columnWidth={columnWidth}
-      rowCount={
-        contacts.length + 1 // Extra header row
-      }
+      rowCount={contacts.length}
       rowHeight={25}
     />
   );

generated/examples/GridImperativeApi.example.jsx

@@ -0,0 +1,3 @@
+function rowHeight(index, { items }) {
+  return items[index].type === "state" ? 35 : 20;
+}

generated/examples/GridImperativeApi.example.tsx

@@ -0,0 +1,3 @@
+function rowHeight(index: number, { items }: RowProps) {
+  return items[index].type === "state" ? 35 : 20;
+}