Table fixed layout

packages/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/table",
-  "version": "12.7.0-test.9",
+  "version": "12.7.0-test.10",
   "description": "leafyGreen UI Kit Table",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

packages/table/src/Cell/Cell.styles.ts

@@ -65,6 +65,10 @@ export const getCellContainerStyles = (align: Align = 'left') => css`
   overflow: hidden;
   justify-content: ${align};
   text-align: ${align};
+
+  > div {
+    justify-content: ${align};
+  }
 `;
 
 export const baseCellStyles = css`

packages/table/src/Cell/HeaderCell/HeaderCell.styles.ts

@@ -19,6 +19,8 @@ export const getBaseHeaderCellStyles = (size: number, isSelectable?: boolean) =>
       &:first-of-type {
         ${getCellPadding({ depth: 0, isExpandable: false, isSelectable })}
       }
+
+      line-height: 16px;
     `,
     {
       [css`

packages/table/src/Row/HeaderRow/HeaderRow.styles.tsx

@@ -4,6 +4,7 @@ import { palette } from '@leafygreen-ui/palette';
 
 export const getBaseStyles = (theme: Theme) => css`
   background-color: inherit;
+  position: relative;
 
   &:last-of-type {
     box-shadow: 0 4px

packages/table/src/Table/Table.styles.ts

@@ -34,5 +34,18 @@ export const getTableContainerStyles = (isVirtual = false) =>
     },
   );
 
-export const getTableStyles = (theme: Theme, baseFontSize: BaseFontSize) =>
-  cx(baseStyles, themeStyles[theme], bodyTypeScaleStyles[baseFontSize]);
+export const getTableStyles = (
+  theme: Theme,
+  baseFontSize: BaseFontSize,
+  isVirtual = false,
+  shouldTruncate = false,
+) =>
+  cx(baseStyles, themeStyles[theme], bodyTypeScaleStyles[baseFontSize], {
+    [css`
+      //TODO: add to documentation
+      // If this is a virtual table that does not truncate the table needs to have a fixed layout.
+      // Without a fixed layout, column widths may change during scrolling, which can cause row heights to shift. This can lead to an infinite loop, ultimately crashing the application. 🙃
+      // A fixed layout prevents this because it prevents columns widths from changing.
+      table-layout: fixed;
+    `]: isVirtual && !shouldTruncate,
+  });

packages/table/src/Table/Table.tsx

@@ -69,7 +69,10 @@ const Table = forwardRef<HTMLDivElement, TableProps<any>>(
           virtualTable={virtualTable}
         >
           <table
-            className={cx(tableClassName, getTableStyles(theme, baseFontSize))}
+            className={cx(
+              tableClassName,
+              getTableStyles(theme, baseFontSize, isVirtual, shouldTruncate),
+            )}
             data-lgid={lgidProp}
             data-is-sticky={!inView}
             {...rest}

packages/table/src/Table/TableWithVS.stories.tsx

@@ -9,6 +9,7 @@ import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 
 import {
+  KitchenSink,
   makeData,
   makeKitchenSinkData,
   Person,
@@ -58,10 +59,9 @@ export default meta;
 
 const virtualScrollingContainerHeight = css`
   max-height: calc(100vh - 200px);
-  /* height: calc(100vh - 200px); */
 `;
 
-const basicColumnDefs: Array<ColumnDef<Person>> = [
+const basicColumnDefs: Array<LGColumnDef<Person>> = [
   {
     accessorKey: 'index',
     header: 'index',
@@ -87,6 +87,7 @@ const basicColumnDefs: Array<ColumnDef<Person>> = [
     accessorKey: 'age',
     header: () => 'Age',
     size: 50,
+    align: 'center',
   },
   {
     accessorKey: 'visits',
@@ -603,7 +604,7 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
   const tableContainerRef = React.useRef<HTMLDivElement>(null);
   const [data] = useState(() => makeKitchenSinkData(10_000));
 
-  const columns = React.useMemo<Array<LGColumnDef<Person>>>(
+  const columns = React.useMemo<Array<LGColumnDef<KitchenSink>>>(
     () => [
       {
         accessorKey: 'dateCreated',
@@ -615,15 +616,18 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
             month: 'short',
             day: 'numeric',
           }),
-      },
-      {
-        accessorKey: 'frequency',
-        header: 'Frequency',
+        size: 180,
       },
       {
         accessorKey: 'clusterType',
         header: 'Cluster Type',
       },
+      {
+        accessorKey: 'frequency',
+        header: 'Frequency',
+        align: 'center',
+        size: 140,
+      },
       {
         accessorKey: 'encryptorEnabled',
         header: 'Encryptor',
@@ -638,23 +642,16 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
         accessorKey: 'mdbVersion',
         header: 'MongoDB Version',
         enableSorting: true,
-        size: 90,
+        size: 120,
       },
       {
         id: 'actions',
         header: '',
-        size: 90,
+        size: 120,
         // eslint-disable-next-line react/display-name
         cell: _ => {
           return (
-            <div
-            // style={{
-            //   height: '40px',
-            //   display: 'flex',
-            //   width: '125px',
-            //   objectFit: 'contain',
-            // }}
-            >
+            <div>
               <IconButton aria-label="Download">
                 <Icon glyph="Download" />
               </IconButton>
@@ -672,15 +669,14 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
     [],
   );
 
-  //TODO: fix type
-  const table = useLeafyGreenVirtualTable<any>({
+  const table = useLeafyGreenVirtualTable<KitchenSink>({
     containerRef: tableContainerRef,
     data,
     columns,
   });
 
   return (
-    <>
+    <div>
       <div>
         <p>{table.getRowModel().rows.length} total rows</p>
       </div>
@@ -693,27 +689,42 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
         shouldTruncate={false}
       >
         <TableHead isSticky>
-          {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
-            <HeaderRow key={headerGroup.id}>
-              {headerGroup.headers.map(header => {
-                return (
-                  <HeaderCell key={header.id} header={header}>
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
-                  </HeaderCell>
-                );
-              })}
-            </HeaderRow>
-          ))}
+          {table
+            .getHeaderGroups()
+            .map((headerGroup: HeaderGroup<KitchenSink>) => (
+              <HeaderRow key={headerGroup.id}>
+                {headerGroup.headers.map((header, index) => {
+                  return (
+                    <HeaderCell
+                      key={header.id}
+                      header={header}
+                      className={css`
+                        ${index === 1 &&
+                        css`
+                          // This overrides the default width of 150px and makes the 2nd column responsive
+                          width: auto;
+                        `}
+                      `}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    </HeaderCell>
+                  );
+                })}
+              </HeaderRow>
+            ))}
         </TableHead>
         <TableBody>
           {table.virtual.getVirtualItems() &&
             table.virtual
               .getVirtualItems()
               .map(
-                (virtualRow: LeafyGreenVirtualItem<Person>, index: number) => {
+                (
+                  virtualRow: LeafyGreenVirtualItem<KitchenSink>,
+                  index: number,
+                ) => {
                   const row = virtualRow.row;
                   const isExpandedContent = row.isExpandedContent ?? false;
 
@@ -727,7 +738,7 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
                         >
                           {row
                             .getVisibleCells()
-                            .map((cell: LeafyGreenTableCell<Person>) => {
+                            .map((cell: LeafyGreenTableCell<KitchenSink>) => {
                               return (
                                 <Cell key={cell.id} cell={cell}>
                                   {flexRender(
@@ -748,6 +759,6 @@ export const DifferentHeights: StoryFn<StoryTableProps> = args => {
               )}
         </TableBody>
       </Table>
-    </>
+    </div>
   );
 };

packages/table/src/utils/makeData.testutils.tsx

@@ -115,6 +115,10 @@ const createKitchenSinkData: (depth?: number) => KitchenSink = (depth = 0) => {
       { value: 'Replica set', weight: 0.45 },
       { value: 'Sharded cluster', weight: 0.45 },
       { value: faker.lorem.lines(2), weight: 0.1 },
+      {
+        value: faker.string.alpha({ length: { min: 25, max: 45 } }),
+        weight: 0.1,
+      },
     ]),
     encryptorEnabled: faker.datatype.boolean(0.75),
     mdbVersion: faker.system.semver(),