\n\t\t\t{!column.cell && {getProperty(row, column.selector, column.format, rowIndex)}
}\n\t\t\t{column.cell && column.cell(row, rowIndex, column, id)}\n\t\t\n\t);\n}\n\nexport default React.memo(Cell) as typeof Cell;\n","import * as React from 'react';\nimport { handleFunctionProps, noop } from './util';\n\nconst defaultComponentName = 'input';\n\nconst calculateBaseStyle = (disabled: boolean) => ({\n\tfontSize: '18px',\n\t...(!disabled && { cursor: 'pointer' }),\n\tpadding: 0,\n\tmarginTop: '1px',\n\tverticalAlign: 'middle',\n\tposition: 'relative',\n});\n\ninterface CheckboxProps {\n\tname: string;\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponent?: any;\n\tcomponentOptions?: { [key: string]: unknown };\n\tindeterminate?: boolean;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\tonClick?: (e: React.MouseEvent) => void;\n}\n\nfunction Checkbox({\n\tname,\n\tcomponent = defaultComponentName,\n\tcomponentOptions = { style: {} },\n\tindeterminate = false,\n\tchecked = false,\n\tdisabled = false,\n\tonClick = noop,\n}: CheckboxProps): JSX.Element {\n\tconst setCheckboxRef = (checkbox: HTMLInputElement) => {\n\t\tif (checkbox) {\n\t\t\t// eslint-disable-next-line no-param-reassign\n\t\t\tcheckbox.indeterminate = indeterminate;\n\t\t}\n\t};\n\n\tconst TagName = component;\n\tconst baseStyle = TagName !== defaultComponentName ? componentOptions.style : calculateBaseStyle(disabled);\n\tconst resolvedComponentOptions = React.useMemo(\n\t\t() => handleFunctionProps(componentOptions, indeterminate),\n\t\t[componentOptions, indeterminate],\n\t);\n\n\treturn (\n\t\t\n\t);\n}\n\nexport default React.memo(Checkbox);\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { CellBase } from './Cell';\nimport Checkbox from './Checkbox';\nimport { RowState, SingleRowAction, ComponentProps } from './types';\n\nconst TableCellCheckboxStyle = styled(CellBase)`\n\tflex: 0 0 48px;\n\tmin-width: 48px;\n\tjustify-content: center;\n\talign-items: center;\n\tuser-select: none;\n\twhite-space: nowrap;\n`;\n\ntype TableCellCheckboxProps = {\n\tname: string;\n\tkeyField: string;\n\trow: T;\n\trowCount: number;\n\tselected: boolean;\n\tselectableRowsComponent: 'input' | React.ReactNode;\n\tselectableRowsComponentProps: ComponentProps;\n\tselectableRowsSingle: boolean;\n\tselectableRowDisabled: RowState;\n\tonSelectedRow: (action: SingleRowAction) => void;\n};\n\nfunction TableCellCheckbox({\n\tname,\n\tkeyField,\n\trow,\n\trowCount,\n\tselected,\n\tselectableRowsComponent,\n\tselectableRowsComponentProps,\n\tselectableRowsSingle,\n\tselectableRowDisabled,\n\tonSelectedRow,\n}: TableCellCheckboxProps): JSX.Element {\n\tconst disabled = !!(selectableRowDisabled && selectableRowDisabled(row));\n\n\tconst handleOnRowSelected = () => {\n\t\tonSelectedRow({\n\t\t\ttype: 'SELECT_SINGLE_ROW',\n\t\t\trow,\n\t\t\tisSelected: selected,\n\t\t\tkeyField,\n\t\t\trowCount,\n\t\t\tsingleSelect: selectableRowsSingle,\n\t\t});\n\t};\n\n\treturn (\n\t\t e.stopPropagation()} className=\"rdt_TableCell\" noPadding>\n\t\t\t\n\t\t\n\t);\n}\n\nexport default TableCellCheckbox;\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { ExpandableIcon } from './types';\n\nconst ButtonStyle = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tuser-select: none;\n\twhite-space: nowrap;\n\tborder: none;\n\tbackground-color: transparent;\n\t${({ theme }) => theme.expanderButton.style};\n`;\n\ntype ExpanderButtonProps = {\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\texpandableIcon: ExpandableIcon;\n\tid: string | number;\n\trow: T;\n\tonToggled?: (row: T) => void;\n};\n\nfunction ExpanderButton({\n\tdisabled = false,\n\texpanded = false,\n\texpandableIcon,\n\tid,\n\trow,\n\tonToggled,\n}: ExpanderButtonProps): JSX.Element {\n\tconst icon = expanded ? expandableIcon.expanded : expandableIcon.collapsed;\n\tconst handleToggle = () => onToggled && onToggled(row);\n\n\treturn (\n\t\t\n\t\t\t{icon}\n\t\t\n\t);\n}\n\nexport default ExpanderButton;\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { CellBase } from './Cell';\nimport ExpanderButton from './ExpanderButton';\nimport { ExpandableIcon } from './types';\n\nconst CellExpanderStyle = styled(CellBase)`\n\twhite-space: nowrap;\n\tfont-weight: 400;\n\tmin-width: 48px;\n\t${({ theme }) => theme.expanderCell.style};\n`;\n\ntype CellExpanderProps = {\n\tdisabled: boolean;\n\texpanded: boolean;\n\texpandableIcon: ExpandableIcon;\n\tid: string | number;\n\trow: T;\n\tonToggled: (row: T) => void;\n};\n\nfunction CellExpander({\n\trow,\n\texpanded = false,\n\texpandableIcon,\n\tid,\n\tonToggled,\n\tdisabled = false,\n}: CellExpanderProps): JSX.Element {\n\treturn (\n\t\t e.stopPropagation()} noPadding>\n\t\t\t\n\t\t\n\t);\n}\n\nexport default CellExpander;\n","import * as React from 'react';\nimport styled, { CSSObject } from 'styled-components';\nimport { ComponentProps, ExpandableRowsComponent } from './types';\n\nconst ExpanderRowStyle = styled.div<{\n\textendedRowStyle: CSSObject;\n}>`\n\twidth: 100%;\n\tbox-sizing: border-box;\n\t${({ theme }) => theme.expanderRow.style};\n\t${({ extendedRowStyle }) => extendedRowStyle};\n`;\n\ntype ExpanderRowProps = {\n\tdata: T;\n\tExpanderComponent: ExpandableRowsComponent;\n\textendedRowStyle: CSSObject;\n\textendedClassNames: string;\n\texpanderComponentProps: ComponentProps;\n};\n\nfunction ExpanderRow({\n\tdata,\n\tExpanderComponent,\n\texpanderComponentProps,\n\textendedRowStyle,\n\textendedClassNames,\n}: ExpanderRowProps): JSX.Element {\n\t// we need to strip of rdt_TableRow from extendedClassNames\n\tconst classNamesSplit = extendedClassNames.split(' ').filter(c => c !== 'rdt_TableRow');\n\tconst classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nexport default React.memo(ExpanderRow) as typeof ExpanderRow;\n","export const STOP_PROP_TAG = 'allowRowEvents';\n\nexport enum Direction {\n\tLTR = 'ltr',\n\tRTL = 'rtl',\n\tAUTO = 'auto',\n}\n\nexport enum Alignment {\n\tLEFT = 'left',\n\tRIGHT = 'right',\n\tCENTER = 'center',\n}\n\nexport enum Media {\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n}\n","import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport TableCell from './TableCell';\nimport TableCellCheckbox from './TableCellCheckbox';\nimport TableCellExpander from './TableCellExpander';\nimport ExpanderRow from './ExpanderRow';\nimport { prop, equalizeId, getConditionalStyle, isOdd, noop } from './util';\nimport { STOP_PROP_TAG } from './constants';\nimport { TableRow, SingleRowAction, TableProps } from './types';\n\nconst highlightCSS = css<{\n\thighlightOnHover?: boolean;\n}>`\n\t&:hover {\n\t\t${({ highlightOnHover, theme }) => highlightOnHover && theme.rows.highlightOnHoverStyle};\n\t}\n`;\n\nconst pointerCSS = css`\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n`;\n\nconst TableRowStyle = styled.div.attrs(props => ({\n\tstyle: props.style,\n}))<{\n\tdense?: boolean;\n\thighlightOnHover?: boolean;\n\tpointerOnHover?: boolean;\n\tselected?: boolean;\n\tstriped?: boolean;\n}>`\n\tdisplay: flex;\n\talign-items: stretch;\n\talign-content: stretch;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\t${({ theme }) => theme.rows.style};\n\t${({ dense, theme }) => dense && theme.rows.denseStyle};\n\t${({ striped, theme }) => striped && theme.rows.stripedStyle};\n\t${({ highlightOnHover }) => highlightOnHover && highlightCSS};\n\t${({ pointerOnHover }) => pointerOnHover && pointerCSS};\n\t${({ selected, theme }) => selected && theme.rows.selectedHighlightStyle};\n`;\n\ntype DProps = Pick<\n\tTableProps,\n\t| 'columns'\n\t| 'conditionalRowStyles'\n\t| 'dense'\n\t| 'expandableIcon'\n\t| 'expandableRows'\n\t| 'expandableRowsComponent'\n\t| 'expandableRowsComponentProps'\n\t| 'expandableRowsHideExpander'\n\t| 'expandOnRowClicked'\n\t| 'expandOnRowDoubleClicked'\n\t| 'highlightOnHover'\n\t| 'expandableInheritConditionalStyles'\n\t| 'keyField'\n\t| 'onRowClicked'\n\t| 'onRowDoubleClicked'\n\t| 'onRowMouseEnter'\n\t| 'onRowMouseLeave'\n\t| 'onRowExpandToggled'\n\t| 'pointerOnHover'\n\t| 'selectableRowDisabled'\n\t| 'selectableRows'\n\t| 'selectableRowsComponent'\n\t| 'selectableRowsComponentProps'\n\t| 'selectableRowsHighlight'\n\t| 'selectableRowsSingle'\n\t| 'striped'\n>;\n\ninterface TableRowProps extends Required> {\n\tdraggingColumnId: number | string;\n\tdefaultExpanded?: boolean;\n\tdefaultExpanderDisabled: boolean;\n\tid: string | number;\n\tonSelectedRow: (action: SingleRowAction) => void;\n\tpointerOnHover: boolean;\n\trow: T;\n\trowCount: number;\n\trowIndex: number;\n\tselected: boolean;\n\tonDragStart: (e: React.DragEvent) => void;\n\tonDragOver: (e: React.DragEvent) => void;\n\tonDragEnd: (e: React.DragEvent) => void;\n\tonDragEnter: (e: React.DragEvent) => void;\n\tonDragLeave: (e: React.DragEvent) => void;\n}\n\nfunction Row({\n\tcolumns = [],\n\tconditionalRowStyles = [],\n\tdefaultExpanded = false,\n\tdefaultExpanderDisabled = false,\n\tdense = false,\n\texpandableIcon,\n\texpandableRows = false,\n\texpandableRowsComponent,\n\texpandableRowsComponentProps,\n\texpandableRowsHideExpander,\n\texpandOnRowClicked = false,\n\texpandOnRowDoubleClicked = false,\n\thighlightOnHover = false,\n\tid,\n\texpandableInheritConditionalStyles,\n\tkeyField,\n\tonRowClicked = noop,\n\tonRowDoubleClicked = noop,\n\tonRowMouseEnter = noop,\n\tonRowMouseLeave = noop,\n\tonRowExpandToggled = noop,\n\tonSelectedRow = noop,\n\tpointerOnHover = false,\n\trow,\n\trowCount,\n\trowIndex,\n\tselectableRowDisabled = null,\n\tselectableRows = false,\n\tselectableRowsComponent,\n\tselectableRowsComponentProps,\n\tselectableRowsHighlight = false,\n\tselectableRowsSingle = false,\n\tselected,\n\tstriped = false,\n\tdraggingColumnId,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tonDragEnter,\n\tonDragLeave,\n}: TableRowProps): JSX.Element {\n\tconst [expanded, setExpanded] = React.useState(defaultExpanded);\n\n\tReact.useEffect(() => {\n\t\tsetExpanded(defaultExpanded);\n\t}, [defaultExpanded]);\n\n\tconst handleExpanded = React.useCallback(() => {\n\t\tsetExpanded(!expanded);\n\t\tonRowExpandToggled(!expanded, row);\n\t}, [expanded, onRowExpandToggled, row]);\n\n\tconst showPointer = pointerOnHover || (expandableRows && (expandOnRowClicked || expandOnRowDoubleClicked));\n\n\tconst handleRowClick = React.useCallback(\n\t\te => {\n\t\t\t// use event delegation allow events to propagate only when the element with data-tag STOP_PROP_TAG is present\n\t\t\tif (e.target && e.target.getAttribute('data-tag') === STOP_PROP_TAG) {\n\t\t\t\tonRowClicked(row, e);\n\n\t\t\t\tif (!defaultExpanderDisabled && expandableRows && expandOnRowClicked) {\n\t\t\t\t\thandleExpanded();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[defaultExpanderDisabled, expandOnRowClicked, expandableRows, handleExpanded, onRowClicked, row],\n\t);\n\n\tconst handleRowDoubleClick = React.useCallback(\n\t\te => {\n\t\t\tif (e.target && e.target.getAttribute('data-tag') === STOP_PROP_TAG) {\n\t\t\t\tonRowDoubleClicked(row, e);\n\t\t\t\tif (!defaultExpanderDisabled && expandableRows && expandOnRowDoubleClicked) {\n\t\t\t\t\thandleExpanded();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[defaultExpanderDisabled, expandOnRowDoubleClicked, expandableRows, handleExpanded, onRowDoubleClicked, row],\n\t);\n\n\tconst handleRowMouseEnter = React.useCallback(\n\t\te => {\n\t\t\tonRowMouseEnter(row, e);\n\t\t},\n\t\t[onRowMouseEnter, row],\n\t);\n\n\tconst handleRowMouseLeave = React.useCallback(\n\t\te => {\n\t\t\tonRowMouseLeave(row, e);\n\t\t},\n\t\t[onRowMouseLeave, row],\n\t);\n\n\tconst rowKeyField = prop(row as TableRow, keyField);\n\tconst { style, classNames } = getConditionalStyle(row, conditionalRowStyles, ['rdt_TableRow']);\n\tconst highlightSelected = selectableRowsHighlight && selected;\n\tconst inheritStyles = expandableInheritConditionalStyles ? style : {};\n\tconst isStriped = striped && isOdd(rowIndex);\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t{selectableRows && (\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{expandableRows && !expandableRowsHideExpander && (\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{columns.map(column => {\n\t\t\t\t\tif (column.omit) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\n\n\t\t\t{expandableRows && expanded && (\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n}\n\nexport default Row;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { SortOrder } from '../DataTable/types';\n\nconst Icon = styled.span<{\n\tsortActive: boolean;\n\tsortDirection: SortOrder;\n}>`\n\tpadding: 2px;\n\tcolor: inherit;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\t${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')};\n\t${({ sortDirection }) => sortDirection === 'desc' && 'transform: rotate(180deg)'};\n`;\n\ninterface NativeSortIconProps {\n\tsortActive: boolean;\n\tsortDirection: SortOrder;\n}\n\nconst NativeSortIcon: React.FC = ({ sortActive, sortDirection }) => (\n\t\n\t\t▲\n\t\n);\n\nexport default NativeSortIcon;\n","import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { CellExtended, CellProps } from './Cell';\nimport NativeSortIcon from '../icons/NativeSortIcon';\nimport { equalizeId } from './util';\nimport { TableColumn, SortAction, SortOrder } from './types';\n\ninterface ColumnStyleProps extends CellProps {\n\tisDragging?: boolean;\n\tonDragStart: (e: React.DragEvent) => void;\n\tonDragOver: (e: React.DragEvent) => void;\n\tonDragEnd: (e: React.DragEvent) => void;\n\tonDragEnter: (e: React.DragEvent) => void;\n\tonDragLeave: (e: React.DragEvent) => void;\n}\n\nconst ColumnStyled = styled(CellExtended)`\n\t${({ button }) => button && 'text-align: center'};\n\t${({ theme, isDragging }) => isDragging && theme.headCells.draggingStyle};\n`;\n\ninterface ColumnSortableProps {\n\tdisabled: boolean;\n\tsortActive: boolean;\n}\n\nconst sortableCSS = css`\n\tcursor: pointer;\n\tspan.__rdt_custom_sort_icon__ {\n\t\ti,\n\t\tsvg {\n\t\t\ttransform: 'translate3d(0, 0, 0)';\n\t\t\t${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')};\n\t\t\tcolor: inherit;\n\t\t\tfont-size: 18px;\n\t\t\theight: 18px;\n\t\t\twidth: 18px;\n\t\t\tbackface-visibility: hidden;\n\t\t\ttransform-style: preserve-3d;\n\t\t\ttransition-duration: 95ms;\n\t\t\ttransition-property: transform;\n\t\t}\n\n\t\t&.asc i,\n\t\t&.asc svg {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t}\n\n\t${({ sortActive }) =>\n\t\t!sortActive &&\n\t\tcss`\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\topacity: 0.7;\n\n\t\t\t\tspan,\n\t\t\t\tspan.__rdt_custom_sort_icon__ * {\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t}\n\t\t`};\n`;\n\nconst ColumnSortable = styled.div`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: inherit;\n\theight: 100%;\n\twidth: 100%;\n\toutline: none;\n\tuser-select: none;\n\toverflow: hidden;\n\t${({ disabled }) => !disabled && sortableCSS};\n`;\n\nconst ColumnText = styled.div`\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n`;\n\ntype TableColProps = {\n\tcolumn: TableColumn;\n\tdisabled: boolean;\n\tdraggingColumnId?: string | number;\n\tsortIcon?: React.ReactNode;\n\tpagination: boolean;\n\tpaginationServer: boolean;\n\tpersistSelectedOnSort: boolean;\n\tselectedColumn: TableColumn;\n\tsortDirection: SortOrder;\n\tsortServer: boolean;\n\tselectableRowsVisibleOnly: boolean;\n\tonSort: (action: SortAction) => void;\n\tonDragStart: (e: React.DragEvent) => void;\n\tonDragOver: (e: React.DragEvent) => void;\n\tonDragEnd: (e: React.DragEvent) => void;\n\tonDragEnter: (e: React.DragEvent) => void;\n\tonDragLeave: (e: React.DragEvent) => void;\n};\n\nfunction TableCol({\n\tcolumn,\n\tdisabled,\n\tdraggingColumnId,\n\tselectedColumn = {},\n\tsortDirection,\n\tsortIcon,\n\tsortServer,\n\tpagination,\n\tpaginationServer,\n\tpersistSelectedOnSort,\n\tselectableRowsVisibleOnly,\n\tonSort,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tonDragEnter,\n\tonDragLeave,\n}: TableColProps): JSX.Element | null {\n\tReact.useEffect(() => {\n\t\tif (typeof column.selector === 'string') {\n\t\t\tconsole.error(\n\t\t\t\t`Warning: ${column.selector} is a string based column selector which has been deprecated as of v7 and will be removed in v8. Instead, use a selector function e.g. row => row[field]...`,\n\t\t\t);\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\tconst [showTooltip, setShowTooltip] = React.useState(false);\n\tconst columnRef = React.useRef(null);\n\n\tReact.useEffect(() => {\n\t\tif (columnRef.current) {\n\t\t\tsetShowTooltip(columnRef.current.scrollWidth > columnRef.current.clientWidth);\n\t\t}\n\t}, [showTooltip]);\n\n\tif (column.omit) {\n\t\treturn null;\n\t}\n\n\tconst handleSortChange = () => {\n\t\tif (!column.sortable && !column.selector) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet direction = sortDirection;\n\n\t\tif (equalizeId(selectedColumn.id, column.id)) {\n\t\t\tdirection = sortDirection === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;\n\t\t}\n\n\t\tonSort({\n\t\t\ttype: 'SORT_CHANGE',\n\t\t\tsortDirection: direction,\n\t\t\tselectedColumn: column,\n\t\t\tclearSelectedOnSort:\n\t\t\t\t(pagination && paginationServer && !persistSelectedOnSort) || sortServer || selectableRowsVisibleOnly,\n\t\t});\n\t};\n\n\tconst handleKeyPress = (event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Enter') {\n\t\t\thandleSortChange();\n\t\t}\n\t};\n\n\tconst renderNativeSortIcon = (sortActive: boolean) => (\n\t\t\n\t);\n\n\tconst renderCustomSortIcon = () => (\n\t\t{sortIcon}\n\t);\n\n\tconst sortActive = !!(column.sortable && equalizeId(selectedColumn.id, column.id));\n\tconst disableSort = !column.sortable || disabled;\n\tconst nativeSortIconLeft = column.sortable && !sortIcon && !column.right;\n\tconst nativeSortIconRight = column.sortable && !sortIcon && column.right;\n\tconst customSortIconLeft = column.sortable && sortIcon && !column.right;\n\tconst customSortIconRight = column.sortable && sortIcon && column.right;\n\n\treturn (\n\t\t\n\t\t\t{column.name && (\n\t\t\t\t\n\t\t\t\t\t{!disableSort && customSortIconRight && renderCustomSortIcon()}\n\t\t\t\t\t{!disableSort && nativeSortIconRight && renderNativeSortIcon(sortActive)}\n\n\t\t\t\t\t{typeof column.name === 'string' ? (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{column.name}\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\tcolumn.name\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!disableSort && customSortIconLeft && renderCustomSortIcon()}\n\t\t\t\t\t{!disableSort && nativeSortIconLeft && renderNativeSortIcon(sortActive)}\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n}\n\nexport default React.memo(TableCol) as typeof TableCol;\n","import * as React from 'react';\nimport styled from 'styled-components';\nimport { CellBase } from './Cell';\nimport Checkbox from './Checkbox';\nimport { AllRowsAction, RowState } from './types';\n\nconst ColumnStyle = styled(CellBase)`\n\tflex: 0 0 48px;\n\tjustify-content: center;\n\talign-items: center;\n\tuser-select: none;\n\twhite-space: nowrap;\n\tfont-size: unset;\n`;\n\ninterface ColumnCheckboxProps {\n\theadCell?: boolean;\n\tselectableRowsComponent: 'input' | React.ReactNode;\n\tselectableRowsComponentProps: Record;\n\tselectableRowDisabled: RowState;\n\tkeyField: string;\n\tmergeSelections: boolean;\n\trowData: T[];\n\tselectedRows: T[];\n\tallSelected: boolean;\n\tonSelectAllRows: (action: AllRowsAction