@veeqo/ui 9.14.2 → 9.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DataGrid/components/Columns/Columns.cjs +3 -1
- package/dist/components/DataGrid/components/Columns/Columns.cjs.map +1 -1
- package/dist/components/DataGrid/components/Columns/Columns.js +3 -1
- package/dist/components/DataGrid/components/Columns/Columns.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +2 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +2 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
- package/dist/components/DataGrid/utils/index.d.ts +1 -0
- package/dist/components/DataGrid/utils/isLastColumn.cjs +11 -0
- package/dist/components/DataGrid/utils/isLastColumn.cjs.map +1 -0
- package/dist/components/DataGrid/utils/isLastColumn.d.ts +2 -0
- package/dist/components/DataGrid/utils/isLastColumn.js +9 -0
- package/dist/components/DataGrid/utils/isLastColumn.js.map +1 -0
- package/package.json +1 -1
|
@@ -5,6 +5,8 @@ require('../../../../hooks/useFocusVisible.cjs');
|
|
|
5
5
|
require('uid/secure');
|
|
6
6
|
var useResizeObserver = require('../../../../hooks/useResizeObserver.cjs');
|
|
7
7
|
require('lodash.throttle');
|
|
8
|
+
require('@tanstack/react-table');
|
|
9
|
+
var isLastColumn = require('../../utils/isLastColumn.cjs');
|
|
8
10
|
|
|
9
11
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
12
|
|
|
@@ -43,7 +45,7 @@ const Columns = ({ table }) => {
|
|
|
43
45
|
});
|
|
44
46
|
// Memoized columns.
|
|
45
47
|
const columns = React.useMemo(() => (React__default.default.createElement("colgroup", null, headers.map((header) => {
|
|
46
|
-
const lastColumn = header.column
|
|
48
|
+
const lastColumn = isLastColumn.isLastColumn(table, header.column);
|
|
47
49
|
const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
|
|
48
50
|
return (React__default.default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
|
|
49
51
|
}))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n const headers = table.getLeafHeaders();\n\n /**\n * Setup state and hook to observe the last column in the table. If the last column is larger than its\n * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n *\n * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n * so we switch to using a fixed width on the column instead.\n */\n const lastColumnRef = useRef<HTMLTableColElement>(null);\n const [lastColumnAuto, setLastColumnAuto] = useState(true);\n useResizeObserver({\n targetRef: lastColumnRef,\n resizeHandler: ({ width }) => {\n const lastHeader = headers[headers.length - 1];\n if (width <= lastHeader.column.getSize()) {\n setLastColumnAuto(false);\n } else {\n setLastColumnAuto(true);\n }\n },\n throttleMs: 10,\n });\n\n // Memoized columns.\n const columns = useMemo(\n () => (\n <colgroup>\n {headers.map((header) => {\n const lastColumn = header.column
|
|
1
|
+
{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n const headers = table.getLeafHeaders();\n\n /**\n * Setup state and hook to observe the last column in the table. If the last column is larger than its\n * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n *\n * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n * so we switch to using a fixed width on the column instead.\n */\n const lastColumnRef = useRef<HTMLTableColElement>(null);\n const [lastColumnAuto, setLastColumnAuto] = useState(true);\n useResizeObserver({\n targetRef: lastColumnRef,\n resizeHandler: ({ width }) => {\n const lastHeader = headers[headers.length - 1];\n if (width <= lastHeader.column.getSize()) {\n setLastColumnAuto(false);\n } else {\n setLastColumnAuto(true);\n }\n },\n throttleMs: 10,\n });\n\n // Memoized columns.\n const columns = useMemo(\n () => (\n <colgroup>\n {headers.map((header) => {\n const lastColumn = isLastColumn(table, header.column);\n const columnWidth =\n lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n return (\n <col\n ref={lastColumn ? lastColumnRef : undefined}\n key={header.column.id}\n style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n />\n );\n })}\n </colgroup>\n ),\n // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n );\n\n return columns;\n};\n"],"names":["useRef","useState","useResizeObserver","useMemo","React","isLastColumn"],"mappings":";;;;;;;;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;AAC1D,IAAAC,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAGC,aAAO,CACrB,OACEC,sBACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAGC,yBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACED,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
|
|
@@ -3,6 +3,8 @@ import '../../../../hooks/useFocusVisible.js';
|
|
|
3
3
|
import 'uid/secure';
|
|
4
4
|
import { useResizeObserver } from '../../../../hooks/useResizeObserver.js';
|
|
5
5
|
import 'lodash.throttle';
|
|
6
|
+
import '@tanstack/react-table';
|
|
7
|
+
import { isLastColumn } from '../../utils/isLastColumn.js';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including
|
|
@@ -37,7 +39,7 @@ const Columns = ({ table }) => {
|
|
|
37
39
|
});
|
|
38
40
|
// Memoized columns.
|
|
39
41
|
const columns = useMemo(() => (React__default.createElement("colgroup", null, headers.map((header) => {
|
|
40
|
-
const lastColumn = header.column
|
|
42
|
+
const lastColumn = isLastColumn(table, header.column);
|
|
41
43
|
const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
|
|
42
44
|
return (React__default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
|
|
43
45
|
}))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n const headers = table.getLeafHeaders();\n\n /**\n * Setup state and hook to observe the last column in the table. If the last column is larger than its\n * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n *\n * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n * so we switch to using a fixed width on the column instead.\n */\n const lastColumnRef = useRef<HTMLTableColElement>(null);\n const [lastColumnAuto, setLastColumnAuto] = useState(true);\n useResizeObserver({\n targetRef: lastColumnRef,\n resizeHandler: ({ width }) => {\n const lastHeader = headers[headers.length - 1];\n if (width <= lastHeader.column.getSize()) {\n setLastColumnAuto(false);\n } else {\n setLastColumnAuto(true);\n }\n },\n throttleMs: 10,\n });\n\n // Memoized columns.\n const columns = useMemo(\n () => (\n <colgroup>\n {headers.map((header) => {\n const lastColumn = header.column
|
|
1
|
+
{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n const headers = table.getLeafHeaders();\n\n /**\n * Setup state and hook to observe the last column in the table. If the last column is larger than its\n * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n *\n * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n * so we switch to using a fixed width on the column instead.\n */\n const lastColumnRef = useRef<HTMLTableColElement>(null);\n const [lastColumnAuto, setLastColumnAuto] = useState(true);\n useResizeObserver({\n targetRef: lastColumnRef,\n resizeHandler: ({ width }) => {\n const lastHeader = headers[headers.length - 1];\n if (width <= lastHeader.column.getSize()) {\n setLastColumnAuto(false);\n } else {\n setLastColumnAuto(true);\n }\n },\n throttleMs: 10,\n });\n\n // Memoized columns.\n const columns = useMemo(\n () => (\n <colgroup>\n {headers.map((header) => {\n const lastColumn = isLastColumn(table, header.column);\n const columnWidth =\n lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n return (\n <col\n ref={lastColumn ? lastColumnRef : undefined}\n key={header.column.id}\n style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n />\n );\n })}\n </colgroup>\n ),\n // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n );\n\n return columns;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC1D,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,OACEA,cACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
|
|
@@ -5,6 +5,7 @@ var reactTable = require('@tanstack/react-table');
|
|
|
5
5
|
var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
|
|
6
6
|
require('uid/secure');
|
|
7
7
|
var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
|
|
8
|
+
var isLastColumn = require('../../../utils/isLastColumn.cjs');
|
|
8
9
|
require('../../../../Stack/Stack.cjs');
|
|
9
10
|
require('../../../../../theme/modules/shadows.cjs');
|
|
10
11
|
require('../../../../../theme/modules/sizes.cjs');
|
|
@@ -40,7 +41,7 @@ const HeaderCell = ({ table, header, index }) => {
|
|
|
40
41
|
const ariaSort = getAriaSort(isSorted);
|
|
41
42
|
const resizeable = table.options.enableColumnResizing &&
|
|
42
43
|
header.column.getCanResize() &&
|
|
43
|
-
!header.column
|
|
44
|
+
!isLastColumn.isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
|
|
44
45
|
const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
|
|
45
46
|
column: header.column,
|
|
46
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !header.column
|
|
1
|
+
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { flexRender } from '@tanstack/react-table';
|
|
|
3
3
|
import { buildClassnames } from '../../../../../utils/buildClassnames.js';
|
|
4
4
|
import 'uid/secure';
|
|
5
5
|
import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
|
|
6
|
+
import { isLastColumn } from '../../../utils/isLastColumn.js';
|
|
6
7
|
import '../../../../Stack/Stack.js';
|
|
7
8
|
import '../../../../../theme/modules/shadows.js';
|
|
8
9
|
import '../../../../../theme/modules/sizes.js';
|
|
@@ -34,7 +35,7 @@ const HeaderCell = ({ table, header, index }) => {
|
|
|
34
35
|
const ariaSort = getAriaSort(isSorted);
|
|
35
36
|
const resizeable = table.options.enableColumnResizing &&
|
|
36
37
|
header.column.getCanResize() &&
|
|
37
|
-
!header.column
|
|
38
|
+
!isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
|
|
38
39
|
const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
|
|
39
40
|
column: header.column,
|
|
40
41
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !header.column
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const isLastColumn = (table, column) => {
|
|
4
|
+
if (table.getIsSomeColumnsPinned('right')) {
|
|
5
|
+
return column.getIsLastColumn('right');
|
|
6
|
+
}
|
|
7
|
+
return column.getIsLastColumn();
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
exports.isLastColumn = isLastColumn;
|
|
11
|
+
//# sourceMappingURL=isLastColumn.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isLastColumn.cjs","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n if (table.getIsSomeColumnsPinned('right')) {\n return column.getIsLastColumn('right');\n }\n\n return column.getIsLastColumn();\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isLastColumn.js","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n if (table.getIsSomeColumnsPinned('right')) {\n return column.getIsLastColumn('right');\n }\n\n return column.getIsLastColumn();\n};\n"],"names":[],"mappings":"MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}
|