@perses-dev/components 0.34.0 → 0.36.0

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,IAAIC,YAAY,EAAEC,MAAM,EAAuCC,GAAG,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AACtH,SAASC,SAAS,EAAEC,MAAM,QAAQ,OAAO,CAAC;AAC1C,SAA2CC,kBAAkB,QAAQ,qBAAqB,CAAC;AAE3F,MAAMC,kBAAkB,GAAGN,MAAM,CAACD,YAAY,CAAC,CAAC,CAAC,EAAEQ,KAAK,CAAA,EAAE,GAAM,CAAA;QAC9DC,OAAO,EAAE,CAAC;QACVC,eAAe,EAAE,SAAS;QAE1B,qBAAqB,EAAE;YACrB,kEAAkE;YAClEA,eAAe,EAAEF,KAAK,CAACG,OAAO,CAACC,UAAU,CAACC,OAAO;SAClD;QACD,iBAAiB,EAAE;YACjBC,OAAO,EAAE,CAAC,UAAU,EAAEN,KAAK,CAACG,OAAO,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,aAAa,EAAE,MAAM;YACrBC,YAAY,EAAE,CAAC;SAChB;KACF,CAAA,AAAC,CAAC,AAAC;AAuBJ,OAAO,SAASnB,SAAS,CAAC,EACxBoB,QAAQ,CAAA,EACRC,OAAO,CAAA,EACPC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,UAAU,EAAG,MAAM,CAAA,EACnBC,cAAc,CAAA,EACdC,aAAa,CAAA,EACbC,YAAY,CAAA,EACZ,GAAGC,UAAU,EACE,EAAE;IACjB,MAAMnB,KAAK,GAAGL,QAAQ,EAAE,AAAC;IAEzB,MAAMyB,KAAK,GAAGvB,MAAM,EAAwB,AAAC;IAE7C,MAAMwB,QAAQ,GAAGR,OAAO,KAAK,MAAM,AAAC;IAEpCjB,SAAS,CAAC,IAAM;QACd,IAAImB,UAAU,KAAK,eAAe,IAAIK,KAAK,CAACE,OAAO,EAAE;YACnDF,KAAK,CAACE,OAAO,CAACC,KAAK,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,EAAE;QAACR,UAAU;KAAC,CAAC,CAAC;IAEjB,MAAMS,WAAW,GAAkD,CAACC,CAAC,GAAK;YAE9CA,GAAe;QADzC,4DAA4D;QAC5D,MAAMC,iBAAiB,GAAGD,CAAAA,GAAe,GAAfA,CAAC,CAACE,aAAa,cAAfF,GAAe,WAAe,GAA9BA,KAAAA,CAA8B,GAA9BA,GAAe,CAAEG,aAAa,CACtD,mDAAmD,CACpD,AAAC;QACF,IAAIF,iBAAiB,EAAE;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,iBAAiB,CAACH,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,AAAC;IAEF,MAAMM,6BAA6B,GAAqC,CAACJ,CAAC,GAAK;QAC7E,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1CT,cAAc,aAAdA,cAAc,WAAK,GAAnBA,KAAAA,CAAmB,GAAnBA,cAAc,CAAGS,CAAC,CAAC,CAAC;IACtB,CAAC,AAAC;IAEF,qBACE,KAAC1B,kBAAkB;QAChB,GAAGoB,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRW,QAAQ,EAAEf,UAAU,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QACxCgB,OAAO,EAAEP,WAAW;QACpBQ,OAAO,EAAEH,6BAA6B;QACtCI,OAAO,EAAEJ,6BAA6B;QACtCK,EAAE,EAAE;YACFpB,KAAK,EAAEA,KAAK;YACZqB,YAAY,EAAEd,QAAQ,GAClB,CAACrB,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACG,OAAO,CAACiC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GACjD,CAAC,UAAU,EAAEpC,KAAK,CAACG,OAAO,CAACiC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;SAC1C;QACDC,GAAG,EAAEjB,KAAK;kBAEV,cAAA,KAAC1B,GAAG;YACFwC,EAAE,EAAE;gBACF,GAAGpC,kBAAkB,CAACE,KAAK,EAAEY,OAAO,EAAE;oBAAEM,YAAY;oBAAED,aAAa;iBAAE,CAAC;gBACtEqB,QAAQ,EAAE,UAAU;gBAEpB,mEAAmE;gBACnE,mDAAmD;gBACnDC,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEA9B,QAAQ;UACL;MACa,CACrB;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        title={description}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow","flexDirection","title"],"mappings":"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"}

package/dist/Table/TableCheckbox.js

@@ -40,7 +40,7 @@ export function TableCheckbox({ color , density , ...otherProps }) {
                 background: color ? alpha(color, 0.5) : undefined
             },
             '& .MuiSvgIcon-root': {
-                fontSize: isCompact ? 14 : 16
+                fontSize: isCompact ? 16 : 18
             }
         }
     });

package/dist/Table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n  color?: string;\n  density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n  const isCompact = density === 'compact';\n\n  return (\n    <Checkbox\n      size={isCompact ? 'small' : 'medium'}\n      {...otherProps}\n      // Disable ripple and set background color below because of some issues\n      // with re-rendering with the keyboard interactions that causes the ripple\n      // animation to stutter.\n      focusRipple={false}\n      // Tab index is handled by the overall keyboard interactions for the table\n      // to avoid trapping a keyboard user in a table by requiring them to tab\n      // through every single checkbox.\n      tabIndex={-1}\n      sx={{\n        color: color,\n\n        padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n        // Centering.\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n\n        '&.Mui-checked': {\n          color: color,\n        },\n\n        '&.Mui-focusVisible': {\n          background: color ? alpha(color, 0.5) : undefined,\n        },\n\n        '& .MuiSvgIcon-root': { fontSize: isCompact ? 14 : 16 },\n      }}\n    />\n  );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,eAAe,CAAC;AAQ/D,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAsB,EAAE;IACnF,MAAMC,SAAS,GAAGF,OAAO,KAAK,SAAS,AAAC;IAExC,qBACE,KAACJ,QAAQ;QACPO,IAAI,EAAED,SAAS,GAAG,OAAO,GAAG,QAAQ;QACnC,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,WAAW,EAAE,KAAK;QAClB,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,QAAQ,EAAE,CAAC,CAAC;QACZC,EAAE,EAAE;YACFP,KAAK,EAAEA,KAAK;YAEZQ,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACP,SAAS,GAAG,IAAI,GAAG,GAAG,CAAC;YAEzD,aAAa;YACbQ,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,IAAI,EAAE,KAAK;YACXC,SAAS,EAAE,uBAAuB;YAElC,eAAe,EAAE;gBACfd,KAAK,EAAEA,KAAK;aACb;YAED,oBAAoB,EAAE;gBACpBe,UAAU,EAAEf,KAAK,GAAGF,KAAK,CAACE,KAAK,EAAE,GAAG,CAAC,GAAGgB,SAAS;aAClD;YAED,oBAAoB,EAAE;gBAAEC,QAAQ,EAAEd,SAAS,GAAG,EAAE,GAAG,EAAE;aAAE;SACxD;MACD,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n  color?: string;\n  density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n  const isCompact = density === 'compact';\n\n  return (\n    <Checkbox\n      size={isCompact ? 'small' : 'medium'}\n      {...otherProps}\n      // Disable ripple and set background color below because of some issues\n      // with re-rendering with the keyboard interactions that causes the ripple\n      // animation to stutter.\n      focusRipple={false}\n      // Tab index is handled by the overall keyboard interactions for the table\n      // to avoid trapping a keyboard user in a table by requiring them to tab\n      // through every single checkbox.\n      tabIndex={-1}\n      sx={{\n        color: color,\n\n        padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n        // Centering.\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n\n        '&.Mui-checked': {\n          color: color,\n        },\n\n        '&.Mui-focusVisible': {\n          background: color ? alpha(color, 0.5) : undefined,\n        },\n\n        '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n      }}\n    />\n  );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,eAAe,CAAC;AAQ/D,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAsB,EAAE;IACnF,MAAMC,SAAS,GAAGF,OAAO,KAAK,SAAS,AAAC;IAExC,qBACE,KAACJ,QAAQ;QACPO,IAAI,EAAED,SAAS,GAAG,OAAO,GAAG,QAAQ;QACnC,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,WAAW,EAAE,KAAK;QAClB,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,QAAQ,EAAE,CAAC,CAAC;QACZC,EAAE,EAAE;YACFP,KAAK,EAAEA,KAAK;YAEZQ,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACP,SAAS,GAAG,IAAI,GAAG,GAAG,CAAC;YAEzD,aAAa;YACbQ,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,IAAI,EAAE,KAAK;YACXC,SAAS,EAAE,uBAAuB;YAElC,eAAe,EAAE;gBACfd,KAAK,EAAEA,KAAK;aACb;YAED,oBAAoB,EAAE;gBACpBe,UAAU,EAAEf,KAAK,GAAGF,KAAK,CAACE,KAAK,EAAE,GAAG,CAAC,GAAGgB,SAAS;aAClD;YAED,oBAAoB,EAAE;gBAAEC,QAAQ,EAAEd,SAAS,GAAG,EAAE,GAAG,EAAE;aAAE;SACxD;MACD,CACF;AACJ,CAAC"}

package/dist/Table/TableHeaderCell.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { SortDirection } from './model/table-model';
+import { TableCellProps } from './TableCell';
+export interface TableHeaderCellProps extends TableCellProps {
+    /**
+     * Handler called when a sort event is triggered.
+     * When specified, the header will include sorting interactions and indicators.
+     */
+    onSort?: ((event: unknown) => void) | undefined;
+    /**
+     * The current direction the header is sorted.
+     */
+    sortDirection?: SortDirection;
+    /**
+     * The next direction the header will be sorted when another sort action
+     * is triggered via click/keyboard. This impacts some UI interactions (e.g.
+     * the direction of the sort arrow on hover f the column is currently
+     * unsorted.)
+     */
+    nextSortDirection?: SortDirection;
+}
+export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): JSX.Element;
+//# sourceMappingURL=TableHeaderCell.d.ts.map

package/dist/Table/TableHeaderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,eA4CtB"}

package/dist/Table/TableHeaderCell.js

@@ -0,0 +1,53 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';
+import { TableCell } from './TableCell';
+export function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+    const showSortLabel = !!onSort;
+    const headerText = /*#__PURE__*/ _jsx(Typography, {
+        noWrap: true,
+        variant: "inherit",
+        component: "div",
+        color: "inherit",
+        children: children
+    });
+    const isActive = !!sortDirection;
+    const direction = isActive ? sortDirection : nextSortDirection;
+    return /*#__PURE__*/ _jsx(TableCell, {
+        ...cellProps,
+        children: showSortLabel ? /*#__PURE__*/ _jsx(TableSortLabel, {
+            onClick: onSort,
+            direction: direction,
+            active: isActive,
+            sx: {
+                // Overrides a default vertical alignment in the CSS that changes
+                // the header vertical rhythm in a way that's inconsistent with
+                // non-sorting headers.
+                verticalAlign: 'unset',
+                // Makes it possible to ellipsize the text if it's too long.
+                maxWidth: '100%',
+                // Make the arrow visible when focused using the keyboard to assist
+                // with a11y.
+                '&:focus-visible': {
+                    [`& .${tableSortLabelClasses.icon}`]: {
+                        opacity: isActive ? 1 : 0.5
+                    }
+                }
+            },
+            children: headerText
+        }) : headerText
+    });
+}
+
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/Table/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { SortDirection } from './model/table-model';\nimport { TableCell, TableCellProps } from './TableCell';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n  /**\n   * Handler called when a sort event is triggered.\n   * When specified, the header will include sorting interactions and indicators.\n   */\n  onSort?: ((event: unknown) => void) | undefined;\n\n  /**\n   * The current direction the header is sorted.\n   */\n  sortDirection?: SortDirection;\n\n  /**\n   * The next direction the header will be sorted when another sort action\n   * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n   * the direction of the sort arrow on hover f the column is currently\n   * unsorted.)\n   */\n  nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n  onSort,\n  sortDirection,\n  nextSortDirection,\n  children,\n  ...cellProps\n}: TableHeaderCellProps) {\n  const showSortLabel = !!onSort;\n\n  const headerText = (\n    <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n      {children}\n    </Typography>\n  );\n\n  const isActive = !!sortDirection;\n  const direction = isActive ? sortDirection : nextSortDirection;\n\n  return (\n    <TableCell {...cellProps}>\n      {showSortLabel ? (\n        <TableSortLabel\n          onClick={onSort}\n          direction={direction}\n          active={isActive}\n          sx={{\n            // Overrides a default vertical alignment in the CSS that changes\n            // the header vertical rhythm in a way that's inconsistent with\n            // non-sorting headers.\n            verticalAlign: 'unset',\n\n            // Makes it possible to ellipsize the text if it's too long.\n            maxWidth: '100%',\n\n            // Make the arrow visible when focused using the keyboard to assist\n            // with a11y.\n            '&:focus-visible': {\n              [`& .${tableSortLabelClasses.icon}`]: {\n                opacity: isActive ? 1 : 0.5,\n              },\n            },\n          }}\n        >\n          {headerText}\n        </TableSortLabel>\n      ) : (\n        headerText\n      )}\n    </TableCell>\n  );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,eAAe,CAAC;AAElF,SAASC,SAAS,QAAwB,aAAa,CAAC;AAuBxD,OAAO,SAASC,eAAe,CAAC,EAC9BC,MAAM,CAAA,EACNC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,QAAQ,CAAA,EACR,GAAGC,SAAS,EACS,EAAE;IACvB,MAAMC,aAAa,GAAG,CAAC,CAACL,MAAM,AAAC;IAE/B,MAAMM,UAAU,iBACd,KAACV,UAAU;QAACW,MAAM;QAACC,OAAO,EAAC,SAAS;QAACC,SAAS,EAAC,KAAK;QAACC,KAAK,EAAC,SAAS;kBACjEP,QAAQ;MACE,AACd,AAAC;IAEF,MAAMQ,QAAQ,GAAG,CAAC,CAACV,aAAa,AAAC;IACjC,MAAMW,SAAS,GAAGD,QAAQ,GAAGV,aAAa,GAAGC,iBAAiB,AAAC;IAE/D,qBACE,KAACJ,SAAS;QAAE,GAAGM,SAAS;kBACrBC,aAAa,iBACZ,KAACV,cAAc;YACbkB,OAAO,EAAEb,MAAM;YACfY,SAAS,EAAEA,SAAS;YACpBE,MAAM,EAAEH,QAAQ;YAChBI,EAAE,EAAE;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,aAAa,EAAE,OAAO;gBAEtB,4DAA4D;gBAC5DC,QAAQ,EAAE,MAAM;gBAEhB,mEAAmE;gBACnE,aAAa;gBACb,iBAAiB,EAAE;oBACjB,CAAC,CAAC,GAAG,EAAEpB,qBAAqB,CAACqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,OAAO,EAAER,QAAQ,GAAG,CAAC,GAAG,GAAG;qBAC5B;iBACF;aACF;sBAEAL,UAAU;UACI,GAEjBA,UAAU,AACX;MACS,CACZ;AACJ,CAAC"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { Column, HeaderGroup, Row } from '@tanstack/react-table';
 import { TableProps } from './model/table-model';
-export declare type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {
-    onRowClick: (id: string) => void;
+export declare type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
+    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
     rows: Array<Row<TableData>>;
     columns: Array<Column<TableData, unknown>>;
     headers: Array<HeaderGroup<TableData>>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
+export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
 //# sourceMappingURL=VirtualizedTable.d.ts.map

package/dist/Table/VirtualizedTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eAqIlC"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAW7E,OAAO,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQpE,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAClH,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA4KlC"}

package/dist/Table/VirtualizedTable.js

@@ -19,13 +19,14 @@ import { TableRow } from './TableRow';
 import { TableBody } from './TableBody';
 import { InnerTable } from './InnerTable';
 import { TableHead } from './TableHead';
+import { TableHeaderCell } from './TableHeaderCell';
 import { TableCell } from './TableCell';
 import { VirtualizedTableContainer } from './VirtualizedTableContainer';
 import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';
 // Separating out the virtualized table because we may want a paginated table
 // in the future that does not need virtualization, and we'd likely lay them
 // out differently.
-export function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+export function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
     const virtuosoRef = useRef(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -69,10 +70,20 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                 if (!row) {
                     return null;
                 }
+                const rowEventOpts = {
+                    id: row.id,
+                    index: row.index
+                };
                 return /*#__PURE__*/ _jsx(TableRow, {
                     ...props,
-                    onClick: ()=>onRowClick(row.id),
-                    density: density
+                    onClick: (e)=>onRowClick(e, row.id),
+                    density: density,
+                    onMouseOver: (e)=>{
+                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                    },
+                    onMouseOut: (e)=>{
+                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                    }
                 });
             },
             TableBody
@@ -81,6 +92,8 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
         density,
         keyboardNav.onTableKeyDown,
         onRowClick,
+        onRowMouseOut,
+        onRowMouseOver,
         rows,
         width
     ]);
@@ -103,17 +116,23 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var ref;
+                                var ref, ref1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
                                     column: i
                                 };
-                                return /*#__PURE__*/ _jsx(TableCell, {
+                                const isSorted = column.getIsSorted();
+                                const nextSorting = column.getNextSortingOrder();
+                                return /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                    onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                    sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                    nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || 'auto',
                                     align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
+                                    description: (ref1 = column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
@@ -132,21 +151,37 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var ref;
+                        var ref, ref1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
+                        const cellContext = cell.getContext();
+                        const cellRenderFn = cell.column.columnDef.cell;
+                        const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
+                        const cellDescriptionDef = (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.cellDescription;
+                        let description = undefined;
+                        if (typeof cellDescriptionDef === 'function') {
+                            // If the cell description is a function, set the value using
+                            // the function.
+                            description = cellDescriptionDef(cellContext);
+                        } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                            // If the cell description is `true` AND the cell content is
+                            // a string (and thus viable as a `title` attribute), use the
+                            // cell content.
+                            description = cellContent;
+                        }
                         return /*#__PURE__*/ _jsx(TableCell, {
                             width: cell.column.getSize() || 'auto',
-                            align: (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
+                            align: (ref1 = cell.column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            description: description,
+                            children: cellContent
                         }, cell.id);
                     })
                 });

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {\n  onRowClick: (id: string) => void;\n  rows: Array<Row<TableData>>;\n  columns: Array<Column<TableData, unknown>>;\n  headers: Array<HeaderGroup<TableData>>;\n};\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        return <TableRow {...props} onClick={() => onRowClick(row.id)} density={density} />;\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      return (\n                        <TableCell\n                          key={header.id}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","onClick","id","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","getSize","align","columnDef","meta","variant","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                  >\n                    {cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"mappings":"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"}

package/dist/Table/model/table-model.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 export declare type TableDensity = 'compact' | 'standard';
+export declare type SortDirection = 'asc' | 'desc' | undefined;
+export declare type TableRowEventOpts = {
+    /**
+     * Unique identifier for the row.
+     */
+    id: string;
+    /**
+     * Index of the row in the original data.
+     */
+    index: number;
+};
 export interface TableProps<TableData> {
     /**
      * Height of the table.
@@ -31,6 +42,18 @@ export interface TableProps<TableData> {
      * When `true`, the first column of the table will include checkboxes.
      */
     checkboxSelection?: boolean;
+    /**
+     * Determines the behavior of row selection.
+     *
+     * - `standard`: clicking a checkbox will toggle that rows's selected/unselected
+     *    state and will not impact other rows.
+     * - `legend`: clicking a checkbox will "focus" that row by selecting it and
+     *    unselecting other rows. Clicking a checkbox with a modifier key pressed,
+     *    will change this behavior to behave like `standard`.
+     *
+     * @default 'standard'
+     */
+    rowSelectionVariant?: 'standard' | 'legend';
     /**
      * State of selected rows in the table when `checkboxSelection` is enabled.
      *
@@ -38,10 +61,29 @@ export interface TableProps<TableData> {
      * combination of this prop and `onRowSelectionChange`.
      */
     rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when the mouse is moved over a table row.
+     */
+    onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * Callback fired when the mouse is moved out of a table row.
+     */
+    onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * State of the column sorting in the table.
+     *
+     * The column sorting is a controlled value that should be managed using a
+     * combination fo this prop and `onSortingChange`.
+     */
+    sorting?: SortingState;
     /**
      * Callback fired when the selected rows in the table changes.
      */
     onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /**
+     * Callback fired when the table sorting changes.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     /**
      * Function used to determine the unique identifier used for each row. This
      * value is used to key `rowSelection`. If this value is not set, the index
@@ -69,14 +111,40 @@ export declare function getTableCellLayout(theme: Theme, density: TableDensity,
 export declare type TableCellAlignment = 'left' | 'right' | 'center';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
-        align?: TableCellAlignment;
+        align?: TableColumnConfig<TData>['align'];
+        headerDescription?: TableColumnConfig<TData>['headerDescription'];
+        cellDescription?: TableColumnConfig<TData>['cellDescription'];
     }
 }
-export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {
     /**
      * Text to display in the header for the column.
      */
     header: string;
+    /**
+     * Alignment of the content in the cell.
+     */
+    align?: TableCellAlignment;
+    /**
+     * Text to display when hovering over a cell. This can be useful for
+     * providing additional information about the column when the content is
+     * ellipsized to fit in the space.
+     *
+     * If set to `true`, it will use the value generated by the `cell` prop if it
+     * can be treated as a string.
+     */
+    cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
+    /**
+     * When `true`, the column will be sortable.
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * Text to display when hovering over the header text. This can be useful for
+     * providing additional information about the column when you want to keep the
+     * header text relatively short to manage the column width.
+     */
+    headerDescription?: string;
     /**
      * Width of the column when rendered in a table. It should be a number in pixels
      * or "auto" to allow the table to automatically adjust the width to fill
@@ -84,10 +152,6 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
      * @default 'auto'
      */
     width?: number | 'auto';
-    /**
-     * Alignment of the content in the cell.
-     */
-    align?: TableCellAlignment;
 }
 /**
  * Takes in a perses table column and transforms it into a tanstack column.

package/dist/Table/model/table-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGjH,oBAAY,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;CACnD;AAWD,aAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAE,sBAA2B,GAC3D,eAAe,CAiCjB;AAED,oBAAY,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7D,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,kBAAkB,CAAC;KAC5B;CACF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAI1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC1E;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAIf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCAmCrG"}
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,EACP,iBAAiB,EACjB,YAAY,EACb,MAAM,uBAAuB,CAAC;AAG/B,oBAAY,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,oBAAY,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,oBAAY,iBAAiB,GAAG;IAC9B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAE5C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAExE;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEvE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAElD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;CACnD;AAWD,aAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAE,sBAA2B,GAC3D,eAAe,CAiCjB;AAED,oBAAY,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7D,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;QAC1C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,mBAAmB,CAAC,CAAC;QAClE,eAAe,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC;KAC/D;CACF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAM1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,WAAW,CAAC;IACxF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;OAOG;IAGH,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;IAEzF;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCA0CrG"}

package/dist/Table/model/table-model.js

@@ -52,7 +52,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Takes in a perses table column and transforms it into a tanstack column.
  */ export function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.
@@ -70,10 +70,14 @@ function calculateTableCellHeight(lineHeight, paddingY) {
         const result = {
             ...otherProps,
             ...sizeProps,
+            // Default sorting to false, so it is very explicitly set per column.
+            enableSorting: !!enableSorting,
             // Open-ended store for extra metadata in TanStack Table, so you can bake
             // in your own features.
             meta: {
-                align
+                align,
+                headerDescription,
+                cellDescription
             }
         };
         return result;