Function getGridTemplateFromColumns

packages/react/src/DataTable/useTable.ts:290–330

(columns: Array<Column<Data>>)

}

export function getGridTemplateFromColumns<Data extends UniqueRow>(columns: Array<Column<Data>>): string[] {
  return columns.map(column => {
    const columnWidth = column.width ?? 'grow'
    let minWidth = 'auto'
    let maxWidth = '1fr'

    if (columnWidth === 'auto') {
      maxWidth = 'auto'
    }

    // Setting a min-width of 'max-content' ensures that the column will grow to fit the widest cell's content.
    // However, If the column has a max width, we can't set the min width to `max-content` because
    // the widest cell's content might overflow the container.
    if (columnWidth === 'grow' && !column.maxWidth) {
      minWidth = 'max-content'
    }

    // Column widths set to "growCollapse" don't need a min width unless one is explicitly provided.
    if (columnWidth === 'growCollapse') {
      minWidth = '0'
    }

    // If a consumer passes `minWidth` or `maxWidth`, we need to override whatever we set above.
    if (column.minWidth) {
      minWidth = typeof column.minWidth === 'number' ? `${column.minWidth}px` : column.minWidth
    }

    if (column.maxWidth) {
      maxWidth = typeof column.maxWidth === 'number' ? `${column.maxWidth}px` : column.maxWidth
    }

    // If a consumer is passing one of the shorthand widths or doesn't pass a width at all, we use the
    // min and max width calculated above to create a minmax() column template value.
    if (typeof columnWidth !== 'number' && ['grow', 'growCollapse', 'auto'].includes(columnWidth)) {
      return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})`
    }

    // If we reach this point, the consumer is passing an explicit width value.
    return typeof columnWidth === 'number' ? `${columnWidth}px` : columnWidth
  })
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function get<ObjectType extends Record<string, any>, Path extends string>(