@procore/data-table 14.14.0 → 14.15.0

package/dist/modern/index.cjs

@@ -9,6 +9,7 @@ var coreIcons = require('@procore/core-icons');
 var classNames = require('classnames');
 var dateFns = require('date-fns');
 var labsFinancialsUtils = require('@procore/labs-financials-utils');
+var format = require('@procore/labs-financials-utils/dist/format');
 var ulid$1 = require('ulid');
 var toastAlert = require('@procore/toast-alert');
 var ReactDOM = require('react-dom');
@@ -1421,7 +1422,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1c24o_369 {
+@keyframes _ag-shake-left-to-right_ye2ai_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5422,7 +5423,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1c24o_1 {
+@keyframes _spin_ye2ai_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7507,10 +7508,15 @@ input[class^=ag-][type=range]:disabled {
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active {
   background-color: #e4ecfb;
-  border-left: 4px solid #2066df;
 }
-.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active > .ag-cell {
-  padding-left: 12px;
+.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active::before {
+  background-color: #2066df;
+  content: "";
+  width: 4px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-overdue span {
   color: #e61920;
@@ -7922,7 +7928,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1c24o_7148 {
+div._contextPanel_ye2ai_7153 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7931,7 +7937,7 @@ div._contextPanel_1c24o_7148 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1c24o_7157 {
+div._contextPanel--hidden_ye2ai_7162 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7939,50 +7945,50 @@ div._contextPanel--hidden_1c24o_7157 {
   width: 0px;
 }
 
-._contextPanelWrapper_1c24o_7165 {
+._contextPanelWrapper_ye2ai_7170 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1c24o_7170 {
+._contextPanelBody_ye2ai_7175 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1c24o_7174 {
+._contextPanel-stickyHeader_ye2ai_7179 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1c24o_7181 {
+._filters-list_ye2ai_7186 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1c24o_7181 ol {
+._filters-list_ye2ai_7186 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1c24o_7190 {
+._col-drag-column-icon_ye2ai_7195 {
   color: #6a767c;
 }
 
-._tabular-nums_1c24o_7194 {
+._tabular-nums_ye2ai_7199 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1c24o_7148",
-  "contextPanel--hidden": "_contextPanel--hidden_1c24o_7157",
-  "contextPanelWrapper": "_contextPanelWrapper_1c24o_7165",
-  "contextPanelBody": "_contextPanelBody_1c24o_7170",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1c24o_7174",
-  "filters-list": "_filters-list_1c24o_7181",
-  "col-drag-column-icon": "_col-drag-column-icon_1c24o_7190",
-  "tabular-nums": "_tabular-nums_1c24o_7194",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1c24o_369",
-  "spin": "_spin_1c24o_1"
+  "contextPanel": "_contextPanel_ye2ai_7153",
+  "contextPanel--hidden": "_contextPanel--hidden_ye2ai_7162",
+  "contextPanelWrapper": "_contextPanelWrapper_ye2ai_7170",
+  "contextPanelBody": "_contextPanelBody_ye2ai_7175",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_ye2ai_7179",
+  "filters-list": "_filters-list_ye2ai_7186",
+  "col-drag-column-icon": "_col-drag-column-icon_ye2ai_7195",
+  "tabular-nums": "_tabular-nums_ye2ai_7199",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_ye2ai_369",
+  "spin": "_spin_ye2ai_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -8656,12 +8662,12 @@ var DateCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = coreReact.useDateTime();
+  const { format: format2 } = coreReact.useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "numeric-date"
   ) : void 0;
@@ -8727,12 +8733,12 @@ var DateTimeCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = coreReact.useDateTime();
+  const { format: format2 } = coreReact.useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject2(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "abbr-weekday-abbr-date-at-time"
   ) : void 0;
@@ -16653,7 +16659,7 @@ var calculateOrdinal = (value) => {
   }
   return "th";
 };
-function dateToFormattedString(date, format = "YYYY-MM-DD") {
+function dateToFormattedString(date, format2 = "YYYY-MM-DD") {
   const fullYear = padStartWidthZeros(date.getFullYear(), 4);
   const months = [
     "January",
@@ -16697,7 +16703,7 @@ function dateToFormattedString(date, format = "YYYY-MM-DD") {
     d: () => `${date.getDay()}`
   };
   const regexp = new RegExp(Object.keys(replace).join("|"), "g");
-  return format.replace(regexp, (match) => {
+  return format2.replace(regexp, (match) => {
     if (match in replace) {
       return replace[match]();
     }
@@ -21340,14 +21346,14 @@ var DateFilterModelFormatter = class extends SimpleFilterModelFormatter {
     const isRange = type == SimpleFilter.IN_RANGE || numberOfInputs === 2;
     const dateFrom = parseDateTimeFromString(condition.dateFrom);
     const dateTo = parseDateTimeFromString(condition.dateTo);
-    const format = this.dateFilterParams.inRangeFloatingFilterDateFormat;
+    const format2 = this.dateFilterParams.inRangeFloatingFilterDateFormat;
     if (isRange) {
-      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format) : "null";
-      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format) : "null";
+      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format2) : "null";
+      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format2) : "null";
       return `${formattedFrom}-${formattedTo}`;
     }
     if (dateFrom != null) {
-      return dateToFormattedString(dateFrom, format);
+      return dateToFormattedString(dateFrom, format2);
     }
     return `${type}`;
   }
@@ -52969,7 +52975,27 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
   if (isGroup) {
     return /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, className, weight: "semibold" }, value);
   }
+  const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
   const URL = columnDefinition.cellRendererParams.getURL(value, data);
+  if (isExternalLink && value && URL) {
+    return /* @__PURE__ */ React76__default.default.createElement(
+      coreReact.Typography,
+      {
+        ...typographyProps,
+        className,
+        style: { display: "flex", alignItems: "center", gap: "5px" }
+      },
+      internalValue,
+      /* @__PURE__ */ React76__default.default.createElement(
+        coreIcons.ExternalLink,
+        {
+          cursor: "pointer",
+          size: "sm",
+          onClick: () => window.open(URL, "_blank")
+        }
+      )
+    );
+  }
   return URL ? /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, className }, /* @__PURE__ */ React76__default.default.createElement(coreReact.Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps }, internalValue);
 };
 var LinkCellRenderer = withDataTableRenderer(
@@ -52997,9 +53023,10 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
     }
     return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null);
   }
-  const internalValue = labsFinancialsUtils.formatNumber(value, {
+  const internalValue = format.format(value, {
     maxDecimalPrecision: 15,
     minDecimalPrecision: 0,
+    shouldUseGtk: true,
     symbol: "",
     ...columnDefinition.cellRendererParams?.formatConfig
   });
@@ -53380,7 +53407,7 @@ var Renderer9 = ({
   value,
   rowPinned
 }) => {
-  const { getColor } = columnDefinition.cellRendererParams;
+  const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
   const I18n = coreReact.useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
@@ -53406,7 +53433,7 @@ var Renderer9 = ({
   const typographyProps = getCellValueTypographyProps(
     columnDefinition.cellRendererParams?.typographyProps
   );
-  if (isGroup || rowPinned && columnDefinition.aggFunc) {
+  if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
     return /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, weight: "semibold" }, label);
   }
   return /* @__PURE__ */ React76__default.default.createElement(coreReact.Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
@@ -54810,8 +54837,8 @@ function transformToExcelStyles(excelDataFormats) {
   if (excelDataFormats === void 0) {
     return void 0;
   }
-  return excelDataFormats.map((format) => {
-    const { id, ...rest } = format;
+  return excelDataFormats.map((format2) => {
+    const { id, ...rest } = format2;
     return {
       id: toExcelCellClass(id),
       ...rest
@@ -55867,6 +55894,8 @@ var DataTableCellRenderer = ({
     value
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
+  const isSelectCellComponent = columnDefinition.cellEditor?.render?.displayName === "SelectCellEditor";
+  const URL = isSelectCellComponent && columnDefinition?.cellRendererParams?.getURL ? columnDefinition.cellRendererParams.getURL(value) : null;
   const startEditing = React76.useCallback(
     () => api.startEditingCell({
       rowIndex: node.rowIndex,
@@ -55874,34 +55903,54 @@ var DataTableCellRenderer = ({
     }),
     [column2, node]
   );
-  return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76__default.default.createElement(RowCheckbox, { api, data, node })), columnDefinition.editable ? /* @__PURE__ */ React76__default.default.createElement(
-    PseudoInlineEditorWrapper,
-    {
-      showArrow: editorType === "select",
-      onClick: startEditing,
-      onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
-        setValue?.(null);
-      } : void 0,
-      showCalendar: editorType === "date",
-      rightAligned: colDef.type === "rightAligned",
-      hasValue,
-      alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
-      ...validationOutput
-    },
-    /* @__PURE__ */ React76__default.default.createElement(Component4, { ...componentParams })
-  ) : /* @__PURE__ */ React76__default.default.createElement(
-    NonEditorWrapper,
+  return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76__default.default.createElement(RowCheckbox, { api, data, node })), /* @__PURE__ */ React76__default.default.createElement(
+    coreReact.Flex,
     {
-      rightAligned: colDef.type === "rightAligned",
-      ...validationOutput,
-      rowPinned: Boolean(componentParams.rowPinned),
-      isGroup: Boolean(componentParams.isGroup)
+      gap: "5px",
+      alignItems: "center",
+      justifyContent: "center",
+      style: { width: "100%" }
     },
-    /* @__PURE__ */ React76__default.default.createElement(
-      Component4,
+    columnDefinition.editable ? /* @__PURE__ */ React76__default.default.createElement(
+      PseudoInlineEditorWrapper,
+      {
+        showArrow: editorType === "select",
+        onClick: startEditing,
+        onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
+          setValue?.(null);
+        } : void 0,
+        showCalendar: editorType === "date",
+        rightAligned: colDef.type === "rightAligned",
+        hasValue,
+        alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
+        ...validationOutput
+      },
+      /* @__PURE__ */ React76__default.default.createElement(Component4, { ...componentParams })
+    ) : /* @__PURE__ */ React76__default.default.createElement(
+      NonEditorWrapper,
       {
-        ...componentParams,
-        tableRef: columnDefinition.cellRendererParams.tableRef
+        rightAligned: colDef.type === "rightAligned",
+        ...validationOutput,
+        rowPinned: Boolean(componentParams.rowPinned),
+        isGroup: Boolean(componentParams.isGroup)
+      },
+      /* @__PURE__ */ React76__default.default.createElement(
+        Component4,
+        {
+          ...componentParams,
+          tableRef: columnDefinition.cellRendererParams.tableRef
+        }
+      )
+    ),
+    URL && /* @__PURE__ */ React76__default.default.createElement(
+      coreIcons.ExternalLink,
+      {
+        cursor: "pointer",
+        size: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          window.open(URL, "_blank");
+        }
       }
     )
   ));
@@ -61443,14 +61492,14 @@ var protection_default = protection;
 // ../../node_modules/@ag-grid-enterprise/excel-export/dist/esm/es6/excelExport/files/xml/styles/numberFormat.mjs
 var numberFormat = {
   getTemplate(styleProperties) {
-    const { format } = styleProperties.numberFormat;
+    const { format: format2 } = styleProperties.numberFormat;
     return {
       name: "NumberFormat",
       properties: {
         prefixedAttributes: [{
           prefix: "ss:",
           map: {
-            Format: format
+            Format: format2
           }
         }]
       }
@@ -63401,15 +63450,15 @@ var registerFill = (fill) => {
   }
   return pos;
 };
-var registerNumberFmt = (format) => {
-  format = _.utf8_encode(format);
-  if (numberFormatMap[format]) {
-    return numberFormatMap[format];
+var registerNumberFmt = (format2) => {
+  format2 = _.utf8_encode(format2);
+  if (numberFormatMap[format2]) {
+    return numberFormatMap[format2];
   }
-  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format);
+  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format2);
   if (pos === -1) {
     pos = registeredNumberFmts.length + 164;
-    registeredNumberFmts.push({ formatCode: format, numFmtId: pos });
+    registeredNumberFmts.push({ formatCode: format2, numFmtId: pos });
   } else {
     pos = registeredNumberFmts[pos].numFmtId;
   }
@@ -80529,44 +80578,73 @@ function generateHTMLString({
         if (exportedDocument.querySelector(".ag-header-container") && showTableHeaderOnEveryPage) {
           const tableHeaderStylesElement = exportedDocument.createElement("style");
           tableHeaderStylesElement.innerHTML = `
+            /* Original header styles */
             .ag-header-container {
               height: ${TABLE_HEADER_HEIGHT}px;
               background: ${coreReact.colors.gray96};
               border-bottom: 1px solid #d6dadc;
-              break-before: page;
+            }
+            /* Cloned header styles */
+            .paginated-header {
+              height: ${TABLE_HEADER_HEIGHT}px;
+              background: ${coreReact.colors.gray96};
+              border-bottom: 1px solid #d6dadc;
+              /* Ensure cloned headers start on a new page */
+              page-break-before: always;
             }
           `;
           exportedDocument.head.appendChild(tableHeaderStylesElement);
-          const tableHeader = exportedDocument.querySelector(".ag-header-container").cloneNode(true);
+          const tableHeaderElement = exportedDocument.querySelector(
+            ".ag-header-container"
+          );
+          if (!tableHeaderElement) {
+            return reject(new Error("Table header container not found."));
+          }
+          const tableHeader = tableHeaderElement.cloneNode(true);
+          tableHeader.classList.add("paginated-header");
           const tableRowsContainer = exportedDocument.querySelector(
             ".ag-center-cols-container"
           );
-          const totalRows = tableRowsContainer.children.length;
-          const maxPageContentHeight = pageHeight - pageFormat.marginInPixels.top - pageFormat.marginInPixels.bottom;
-          let pageContentHeight = TABLE_HEADER_HEIGHT;
-          let currentPage = 1;
-          for (let index = 0; index < totalRows; index++) {
-            const getScaledRowHeight = (row3) => {
-              const scale = pageHeight / tableWidth;
-              let rowHeight2 = Number(row3.style.height.replace("px", ""));
-              if (scale < 1) {
-                rowHeight2 *= scale;
+          if (!tableRowsContainer) {
+            console.error("Table rows container not found.");
+            return;
+          }
+          const allRows = Array.from(
+            tableRowsContainer.children
+          );
+          tableRowsContainer.innerHTML = "";
+          const maxPageContentHeight = pageHeight - (pageFormat.marginInPixels?.top ?? DEFAULT_PAGE_MARGIN) - (pageFormat.marginInPixels?.bottom ?? DEFAULT_PAGE_MARGIN) - TABLE_HEADER_HEIGHT;
+          let currentPageContentHeight = 0;
+          let rowsInCurrentPage = [];
+          let isFirstPage = true;
+          const appendPage = () => {
+            if (rowsInCurrentPage.length > 0) {
+              if (!isFirstPage) {
+                tableRowsContainer.appendChild(tableHeader.cloneNode(true));
+              } else {
+                isFirstPage = false;
               }
-              return rowHeight2;
-            };
-            const row2 = tableRowsContainer.children[index + currentPage - 1];
-            const rowHeight = getScaledRowHeight(row2);
-            if (pageContentHeight + rowHeight >= maxPageContentHeight) {
-              tableRowsContainer.insertBefore(
-                tableHeader.cloneNode(true),
-                row2
+              rowsInCurrentPage.forEach(
+                (row2) => tableRowsContainer.appendChild(row2)
               );
-              currentPage += 1;
-              pageContentHeight = TABLE_HEADER_HEIGHT;
-            } else {
-              pageContentHeight += rowHeight;
+              rowsInCurrentPage = [];
+              currentPageContentHeight = 0;
             }
-          }
+          };
+          allRows.forEach((row2) => {
+            let rowHeight = parseFloat(row2.style.height.replace("px", "")) || row2.offsetHeight;
+            const scale = pageHeight / tableWidth;
+            if (scale < 1) {
+              rowHeight *= scale;
+            }
+            if (currentPageContentHeight + rowHeight > maxPageContentHeight) {
+              appendPage();
+              isFirstPage = false;
+            }
+            rowsInCurrentPage.push(row2);
+            currentPageContentHeight += rowHeight;
+          });
+          appendPage();
         }
         resolve(exportedDocument.getElementsByTagName("html")[0].outerHTML);
       }, 2e3);

package/dist/modern/index.d.cts

@@ -303,6 +303,7 @@ declare const GroupCellRenderer: React$1.FC<any>;
 interface LinkCellRendererParams<TValue> {
     typographyProps?: TypographyProps;
     getURL: (value: TValue, data: any) => string;
+    isExternalLink?: boolean;
 }
 type LinkCellColumnDefinition<TValue = any> = GranularRequired<ColumnDefinition<TValue, typeof LinkCellRenderer, LinkCellRendererParams<TValue>>, 'cellRendererParams'>;
 interface LinkCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, LinkCellColumnDefinition> {
@@ -385,6 +386,7 @@ declare const PercentCellEditor: React__default.ForwardRefExoticComponent<_ag_gr
 interface PillCellRendererParams<TValue> {
     getColor: (item: TValue) => PillColor;
     typographyProps?: TypographyProps;
+    displayAsPill?: boolean;
 }
 type PillCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof PillCellRenderer, PillCellRendererParams<TValue>, typeof PillSelectCellEditor, PillCellEditorParams<TValue>, TFilterOption, TFilterValue>, 'cellRendererParams'>;
 interface PillCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, PillCellColumnDefinition<TValue>> {
@@ -403,6 +405,7 @@ declare const PillSelectCellEditor: React__default.ForwardRefExoticComponent<_ag
 
 type SelectCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof SelectCellRenderer, {
     typographyProps?: TypographyProps;
+    getURL?: (value: TValue) => string | null;
 }, typeof SelectCellEditor, SelectCellEditorParams<TValue>, TFilterOption, TFilterValue, 'select', SelectBulkEditorParams>, 'cellEditor' | 'cellEditorParams'>;
 interface SelectCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, SelectCellColumnDefinition<TValue>> {
 }

package/dist/modern/index.d.ts

@@ -303,6 +303,7 @@ declare const GroupCellRenderer: React$1.FC<any>;
 interface LinkCellRendererParams<TValue> {
     typographyProps?: TypographyProps;
     getURL: (value: TValue, data: any) => string;
+    isExternalLink?: boolean;
 }
 type LinkCellColumnDefinition<TValue = any> = GranularRequired<ColumnDefinition<TValue, typeof LinkCellRenderer, LinkCellRendererParams<TValue>>, 'cellRendererParams'>;
 interface LinkCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, LinkCellColumnDefinition> {
@@ -385,6 +386,7 @@ declare const PercentCellEditor: React__default.ForwardRefExoticComponent<_ag_gr
 interface PillCellRendererParams<TValue> {
     getColor: (item: TValue) => PillColor;
     typographyProps?: TypographyProps;
+    displayAsPill?: boolean;
 }
 type PillCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof PillCellRenderer, PillCellRendererParams<TValue>, typeof PillSelectCellEditor, PillCellEditorParams<TValue>, TFilterOption, TFilterValue>, 'cellRendererParams'>;
 interface PillCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, PillCellColumnDefinition<TValue>> {
@@ -403,6 +405,7 @@ declare const PillSelectCellEditor: React__default.ForwardRefExoticComponent<_ag
 
 type SelectCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof SelectCellRenderer, {
     typographyProps?: TypographyProps;
+    getURL?: (value: TValue) => string | null;
 }, typeof SelectCellEditor, SelectCellEditorParams<TValue>, TFilterOption, TFilterValue, 'select', SelectBulkEditorParams>, 'cellEditor' | 'cellEditorParams'>;
 interface SelectCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, SelectCellColumnDefinition<TValue>> {
 }