@payloadcms/ui 3.0.0-canary.e14c80d → 3.0.0-canary.e1fc0e0

package/dist/elements/Table/index.js

@@ -1,62 +1,109 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 export * from './TableCellProvider/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTableColumns } from '../TableColumns/index.js';
-import { TableCellProvider } from './TableCellProvider/index.js';
 import './index.scss';
+import { RenderCell } from './RenderCell.js';
+import { TableCellProvider } from './TableCellProvider/index.js';
 export { TableCellProvider };
 const baseClass = 'table';
-export const Table = ({ columns: columnsFromProps, customCellContext, data })=>{
-    const { columns: columnsFromContext } = useTableColumns();
-    const columns = columnsFromProps || columnsFromContext;
-    const activeColumns = columns?.filter((col)=>col?.active);
-    if (!activeColumns || activeColumns.length === 0) {
-        return /*#__PURE__*/ _jsx("div", {
+export const Table = t0 => {
+  const $ = _c(10);
+  const {
+    appearance,
+    columns: columnsFromProps,
+    customCellContext,
+    data
+  } = t0;
+  const {
+    cellProps,
+    columns: columnsFromContext
+  } = useTableColumns();
+  const columns = columnsFromProps || columnsFromContext;
+  let t1;
+  let t2;
+  if ($[0] !== columns || $[1] !== appearance || $[2] !== data || $[3] !== cellProps || $[4] !== customCellContext) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const activeColumns = columns?.filter(_temp);
+      if (!activeColumns || activeColumns.length === 0) {
+        let t3;
+        if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+          t3 = _jsx("div", {
             children: "No columns selected"
-        });
-    }
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        children: /*#__PURE__*/ _jsxs("table", {
-            cellPadding: "0",
-            cellSpacing: "0",
-            children: [
-                /*#__PURE__*/ _jsx("thead", {
-                    children: /*#__PURE__*/ _jsx("tr", {
-                        children: activeColumns.map((col, i)=>/*#__PURE__*/ _jsx("th", {
-                                id: `heading-${col.accessor}`,
-                                children: col.components.Heading
-                            }, i))
-                    })
-                }),
-                /*#__PURE__*/ _jsx("tbody", {
-                    children: data && data.map((row, rowIndex)=>/*#__PURE__*/ _jsx("tr", {
-                            className: `row-${rowIndex + 1}`,
-                            children: activeColumns.map((col, colIndex)=>{
-                                return /*#__PURE__*/ _jsx("td", {
-                                    className: `cell-${col.accessor}`,
-                                    children: /*#__PURE__*/ _jsx(TableCellProvider, {
-                                        cellData: row[col.accessor],
-                                        cellProps: col?.cellProps,
-                                        columnIndex: colIndex,
-                                        customCellContext: customCellContext,
-                                        rowData: row,
-                                        children: /*#__PURE__*/ _jsx(RenderComponent, {
-                                            clientProps: {
-                                                ...col?.cellProps
-                                            },
-                                            mappedComponent: col.components.Cell
-                                        })
-                                    })
-                                }, colIndex);
-                            })
-                        }, rowIndex))
-                })
-            ]
+          });
+          $[7] = t3;
+        } else {
+          t3 = $[7];
+        }
+        t2 = t3;
+        break bb0;
+      }
+      const t3 = appearance && `${baseClass}--appearance-${appearance}`;
+      let t4;
+      if ($[8] !== t3) {
+        t4 = [baseClass, t3].filter(Boolean);
+        $[8] = t3;
+        $[9] = t4;
+      } else {
+        t4 = $[9];
+      }
+      t1 = _jsx("div", {
+        className: t4.join(" "),
+        children: _jsxs("table", {
+          cellPadding: "0",
+          cellSpacing: "0",
+          children: [_jsx("thead", {
+            children: _jsx("tr", {
+              children: activeColumns.map(_temp2)
+            })
+          }), _jsx("tbody", {
+            children: data && data.map((row, rowIndex) => _jsx("tr", {
+              className: `row-${rowIndex + 1}`,
+              children: activeColumns.map((col_1, colIndex) => {
+                const isLink = colIndex === 0 && col_1.accessor !== "_select" || colIndex === 1 && activeColumns[0]?.accessor === "_select";
+                return _jsx(RenderCell, {
+                  cellProps: {
+                    link: isLink,
+                    ...cellProps?.[colIndex]
+                  },
+                  col: col_1,
+                  colIndex,
+                  customCellContext,
+                  row
+                }, colIndex);
+              })
+            }, rowIndex))
+          })]
         })
-    });
+      });
+    }
+    $[0] = columns;
+    $[1] = appearance;
+    $[2] = data;
+    $[3] = cellProps;
+    $[4] = customCellContext;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 };
-
+function _temp(col) {
+  return col?.active;
+}
+function _temp2(col_0, i) {
+  return _jsx("th", {
+    id: `heading-${col_0.accessor}`,
+    children: col_0.Heading
+  }, i);
+}
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, ClientField, MappedComponent } from 'payload'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport { TableCellProvider } from './TableCellProvider/index.js'\nimport './index.scss'\n\nexport { TableCellProvider }\n\nconst baseClass = 'table'\n\nexport type Column = {\n  readonly Label: React.ReactNode\n  readonly accessor: string\n  readonly active: boolean\n  readonly cellProps?: Partial<CellComponentProps>\n  readonly components: {\n    Cell: MappedComponent\n    Heading: React.ReactNode\n  }\n}\n\nexport type Props = {\n  readonly columns?: Column[]\n  readonly customCellContext?: Record<string, unknown>\n  readonly data: Record<string, unknown>[]\n  readonly fields: ClientField[]\n}\n\nexport const Table: React.FC<Props> = ({ columns: columnsFromProps, customCellContext, data }) => {\n  const { columns: columnsFromContext } = useTableColumns()\n\n  const columns = columnsFromProps || columnsFromContext\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div className={baseClass}>\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor}`} key={i}>\n                {col.components.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data.map((row, rowIndex) => (\n              <tr className={`row-${rowIndex + 1}`} key={rowIndex}>\n                {activeColumns.map((col, colIndex) => {\n                  return (\n                    <td className={`cell-${col.accessor}`} key={colIndex}>\n                      <TableCellProvider\n                        cellData={row[col.accessor]}\n                        cellProps={col?.cellProps}\n                        columnIndex={colIndex}\n                        customCellContext={customCellContext}\n                        rowData={row}\n                      >\n                        <RenderComponent\n                          clientProps={{ ...col?.cellProps }}\n                          mappedComponent={col.components.Cell}\n                        />\n                      </TableCellProvider>\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"names":["React","RenderComponent","useTableColumns","TableCellProvider","baseClass","Table","columns","columnsFromProps","customCellContext","data","columnsFromContext","activeColumns","filter","col","active","length","div","className","table","cellPadding","cellSpacing","thead","tr","map","i","th","id","accessor","components","Heading","tbody","row","rowIndex","colIndex","td","cellData","cellProps","columnIndex","rowData","clientProps","mappedComponent","Cell"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,cAAc,+BAA8B;AAE5C,SAASC,eAAe,QAAQ,4CAA2C;AAC3E,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,SAASC,iBAAiB,QAAQ,+BAA8B;AAChE,OAAO,eAAc;AAErB,SAASA,iBAAiB,GAAE;AAE5B,MAAMC,YAAY;AAoBlB,OAAO,MAAMC,QAAyB,CAAC,EAAEC,SAASC,gBAAgB,EAAEC,iBAAiB,EAAEC,IAAI,EAAE;IAC3F,MAAM,EAAEH,SAASI,kBAAkB,EAAE,GAAGR;IAExC,MAAMI,UAAUC,oBAAoBG;IAEpC,MAAMC,gBAAgBL,SAASM,OAAO,CAACC,MAAQA,KAAKC;IAEpD,IAAI,CAACH,iBAAiBA,cAAcI,MAAM,KAAK,GAAG;QAChD,qBAAO,KAACC;sBAAI;;IACd;IAEA,qBACE,KAACA;QAAIC,WAAWb;kBACd,cAAA,MAACc;YAAMC,aAAY;YAAIC,aAAY;;8BACjC,KAACC;8BACC,cAAA,KAACC;kCACEX,cAAcY,GAAG,CAAC,CAACV,KAAKW,kBACvB,KAACC;gCAAGC,IAAI,CAAC,QAAQ,EAAEb,IAAIc,QAAQ,CAAC,CAAC;0CAC9Bd,IAAIe,UAAU,CAACC,OAAO;+BADeL;;;8BAM9C,KAACM;8BACErB,QACCA,KAAKc,GAAG,CAAC,CAACQ,KAAKC,yBACb,KAACV;4BAAGL,WAAW,CAAC,IAAI,EAAEe,WAAW,EAAE,CAAC;sCACjCrB,cAAcY,GAAG,CAAC,CAACV,KAAKoB;gCACvB,qBACE,KAACC;oCAAGjB,WAAW,CAAC,KAAK,EAAEJ,IAAIc,QAAQ,CAAC,CAAC;8CACnC,cAAA,KAACxB;wCACCgC,UAAUJ,GAAG,CAAClB,IAAIc,QAAQ,CAAC;wCAC3BS,WAAWvB,KAAKuB;wCAChBC,aAAaJ;wCACbzB,mBAAmBA;wCACnB8B,SAASP;kDAET,cAAA,KAAC9B;4CACCsC,aAAa;gDAAE,GAAG1B,KAAKuB,SAAS;4CAAC;4CACjCI,iBAAiB3B,IAAIe,UAAU,CAACa,IAAI;;;mCAVER;4BAehD;2BAlByCD;;;;;AAyBzD,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTableColumns","RenderCell","TableCellProvider","baseClass","Table","t0","$","appearance","columns","columnsFromProps","customCellContext","data","cellProps","columnsFromContext","t1","t2","Symbol","for","activeColumns","filter","_temp","length","t3","_jsx","children","t4","Boolean","className","join","_jsxs","cellPadding","cellSpacing","map","_temp2","row","rowIndex","col_1","colIndex","isLink","col","accessor","link","active","col_0","i","id","Heading"],"sources":["../../../src/elements/Table/index.tsx"],"sourcesContent":["'use client'\nimport type { CellComponentProps, ClientField } from 'payload'\n\nimport React from 'react'\n\nexport * from './TableCellProvider/index.js'\n\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\nimport { RenderCell } from './RenderCell.js'\nimport { TableCellProvider } from './TableCellProvider/index.js'\n\nexport { TableCellProvider }\n\nconst baseClass = 'table'\n\nexport type Column = {\n  readonly accessor: string\n  readonly active: boolean\n  readonly cellProps?: Partial<CellComponentProps>\n  readonly Heading: React.ReactNode\n}\n\nexport type Props = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly columns?: Column[]\n  readonly customCellContext?: Record<string, unknown>\n  readonly data: Record<string, unknown>[]\n  readonly fields: ClientField[]\n}\n\nexport const Table: React.FC<Props> = ({\n  appearance,\n  columns: columnsFromProps,\n  customCellContext,\n  data,\n}) => {\n  const { cellProps, columns: columnsFromContext } = useTableColumns()\n\n  const columns = columnsFromProps || columnsFromContext\n\n  const activeColumns = columns?.filter((col) => col?.active)\n\n  if (!activeColumns || activeColumns.length === 0) {\n    return <div>No columns selected</div>\n  }\n\n  return (\n    <div\n      className={[baseClass, appearance && `${baseClass}--appearance-${appearance}`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <table cellPadding=\"0\" cellSpacing=\"0\">\n        <thead>\n          <tr>\n            {activeColumns.map((col, i) => (\n              <th id={`heading-${col.accessor}`} key={i}>\n                {col.Heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data &&\n            data.map((row, rowIndex) => (\n              <tr className={`row-${rowIndex + 1}`} key={rowIndex}>\n                {activeColumns.map((col, colIndex) => {\n                  const isLink =\n                    (colIndex === 0 && col.accessor !== '_select') ||\n                    (colIndex === 1 && activeColumns[0]?.accessor === '_select')\n\n                  return (\n                    <RenderCell\n                      cellProps={{\n                        link: isLink,\n                        ...cellProps?.[colIndex],\n                      }}\n                      col={col}\n                      colIndex={colIndex}\n                      customCellContext={customCellContext}\n                      key={colIndex}\n                      row={row}\n                    />\n                  )\n                })}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/index.scss

@@ -1,54 +1,106 @@
 @import '../../scss/styles.scss';
 
-.table {
-  margin-bottom: $baseline;
-  overflow: auto;
-  max-width: 100%;
+@layer payload-default {
+  .table {
+    margin-bottom: $baseline;
+    overflow: auto;
+    max-width: 100%;
 
-  thead {
-    color: var(--theme-elevation-400);
+    table {
+      min-width: 100%;
+    }
+
+    thead {
+      color: var(--theme-elevation-400);
 
-    th {
-      font-weight: normal;
-      text-align: left;
-      [dir='rtl'] & {
-        text-align: right;
+      th {
+        font-weight: normal;
+        text-align: left;
+        [dir='rtl'] & {
+          text-align: right;
+        }
       }
     }
-  }
 
-  th,
-  td {
-    padding: base(0.8) base(0.6);
-    min-width: 150px;
+    th,
+    td {
+      vertical-align: top;
+      padding: base(0.8) base(0.6);
+      min-width: 150px;
+
+      &:first-child {
+        padding-inline-start: base(0.8);
+      }
 
-    &:first-child {
-      padding-inline-start: base(0.8);
+      &:last-child {
+        padding-inline-end: base(0.8);
+      }
     }
 
-    &:last-child {
-      padding-inline-end: base(0.8);
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background: var(--theme-elevation-50);
+          border-radius: $style-radius-s;
+        }
+      }
+    }
+
+    a:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
     }
-  }
 
-  tbody {
-    tr {
-      &:nth-child(odd) {
+    &--appearance-condensed {
+      thead {
+        th:first-child {
+          border-top-left-radius: $style-radius-s;
+        }
+
+        th:last-child {
+          border-top-right-radius: $style-radius-s;
+        }
+
         background: var(--theme-elevation-50);
-        border-radius: $style-radius-s;
       }
-    }
-  }
 
-  a:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
+      tbody {
+        tr {
+          &:nth-child(odd) {
+            background: transparent;
+            border-radius: 0;
+          }
+        }
+      }
 
-  @include mid-break {
-    th,
-    td {
-      max-width: 70vw;
+      th,
+      td {
+        padding: base(0.3) base(0.3);
+
+        &:first-child {
+          padding-inline-start: base(0.6);
+        }
+
+        &:last-child {
+          padding-inline-end: base(0.6);
+        }
+      }
+
+      th {
+        padding: base(0.3);
+      }
+
+      tr td,
+      th {
+        border: 0.5px solid var(--theme-elevation-100);
+      }
+    }
+
+    @include mid-break {
+      th,
+      td {
+        max-width: 70vw;
+      }
     }
   }
 }

package/dist/elements/TableColumns/buildColumnState.d.ts

@@ -1,12 +1,15 @@
-import type { CellComponentProps, ClientField, SanitizedCollectionConfig } from 'payload';
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js';
+import type { SortColumnProps } from '../SortColumn/index.js';
 import type { Column } from '../Table/index.js';
 type Args = {
-    cellProps: Partial<CellComponentProps>[];
+    beforeRows?: Column[];
     columnPreferences: ColumnPreferences;
     columns?: ColumnPreferences;
     enableRowSelections: boolean;
+    enableRowTypes?: boolean;
     fields: ClientField[];
+    sortColumnProps?: Partial<SortColumnProps>;
     useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle'];
 };
 export declare const buildColumnState: (args: Args) => Column[];

package/dist/elements/TableColumns/buildColumnState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/C,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAA;IACxC,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EA0InD,CAAA"}
+{"version":3,"file":"buildColumnState.d.ts","sourceRoot":"","sources":["../../../src/elements/TableColumns/buildColumnState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAIlF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAS/C,KAAK,IAAI,GAAG;IACV,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,mBAAmB,EAAE,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,IAAI,KAAG,MAAM,EA4JnD,CAAA"}

package/dist/elements/TableColumns/buildColumnState.js

@@ -1,111 +1,135 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { DefaultCell } from '../../elements/Table/DefaultCell/index.js';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js';
 import { SelectAll } from '../SelectAll/index.js';
 import { SelectRow } from '../SelectRow/index.js';
 import { SortColumn } from '../SortColumn/index.js';
-export const buildColumnState = (args)=>{
-    const { cellProps, columnPreferences, columns, enableRowSelections, fields, useAsTitle } = args;
-    let sortedFieldMap = flattenFieldMap(fields);
-    // place the `ID` field first, if it exists
-    // do the same for the `useAsTitle` field with precedence over the `ID` field
-    // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`
-    const idFieldIndex = sortedFieldMap.findIndex((field)=>'name' in field && field.name === 'id');
-    if (idFieldIndex > -1) {
-        const idField = sortedFieldMap.splice(idFieldIndex, 1)[0];
-        sortedFieldMap.unshift(idField);
-    }
-    const useAsTitleFieldIndex = useAsTitle ? sortedFieldMap.findIndex((field)=>'name' in field && field.name === useAsTitle) : -1;
-    if (useAsTitleFieldIndex > -1) {
-        const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0];
-        sortedFieldMap.unshift(useAsTitleField);
+import { DefaultCell } from '../Table/DefaultCell/index.js';
+export const buildColumnState = args => {
+  const {
+    beforeRows,
+    columnPreferences,
+    columns,
+    enableRowSelections,
+    fields,
+    sortColumnProps,
+    useAsTitle
+  } = args;
+  let sortedFieldMap = flattenFieldMap(fields);
+  // place the `ID` field first, if it exists
+  // do the same for the `useAsTitle` field with precedence over the `ID` field
+  // then sort the rest of the fields based on the `defaultColumns` or `columnPreferences`
+  const idFieldIndex = sortedFieldMap.findIndex(field => 'name' in field && field.name === 'id');
+  if (idFieldIndex > -1) {
+    const idField = sortedFieldMap.splice(idFieldIndex, 1)[0];
+    sortedFieldMap.unshift(idField);
+  }
+  const useAsTitleFieldIndex = useAsTitle ? sortedFieldMap.findIndex(field => 'name' in field && field.name === useAsTitle) : -1;
+  if (useAsTitleFieldIndex > -1) {
+    const useAsTitleField = sortedFieldMap.splice(useAsTitleFieldIndex, 1)[0];
+    sortedFieldMap.unshift(useAsTitleField);
+  }
+  const sortTo = columnPreferences || columns;
+  if (sortTo) {
+    // sort the fields to the order of `defaultColumns` or `columnPreferences`
+    sortedFieldMap = sortedFieldMap.sort((a, b) => {
+      const aIndex = sortTo.findIndex(column => 'name' in a && column.accessor === a.name);
+      const bIndex = sortTo.findIndex(column => 'name' in b && column.accessor === b.name);
+      if (aIndex === -1 && bIndex === -1) {
+        return 0;
+      }
+      if (aIndex === -1) {
+        return 1;
+      }
+      if (bIndex === -1) {
+        return -1;
+      }
+      return aIndex - bIndex;
+    });
+  }
+  const activeColumnsIndices = [];
+  const sorted = sortedFieldMap.reduce((acc, field, index) => {
+    const columnPreference = columnPreferences?.find(preference => 'name' in field && preference.accessor === field.name);
+    let active = false;
+    if (columnPreference) {
+      active = columnPreference.active;
+    } else if (columns && Array.isArray(columns) && columns.length > 0) {
+      active = columns.find(column => 'name' in field && column.accessor === field.name)?.active;
+    } else if (activeColumnsIndices.length < 4) {
+      active = true;
     }
-    const sortTo = columnPreferences || columns;
-    if (sortTo) {
-        // sort the fields to the order of `defaultColumns` or `columnPreferences`
-        sortedFieldMap = sortedFieldMap.sort((a, b)=>{
-            const aIndex = sortTo.findIndex((column)=>'name' in a && column.accessor === a.name);
-            const bIndex = sortTo.findIndex((column)=>'name' in b && column.accessor === b.name);
-            if (aIndex === -1 && bIndex === -1) return 0;
-            if (aIndex === -1) return 1;
-            if (bIndex === -1) return -1;
-            return aIndex - bIndex;
-        });
+    if (active && !activeColumnsIndices.includes(index)) {
+      activeColumnsIndices.push(index);
     }
-    const activeColumnsIndices = [];
-    const sorted = sortedFieldMap.reduce((acc, field, index)=>{
-        const columnPreference = columnPreferences?.find((preference)=>'name' in field && preference.accessor === field.name);
-        let active = false;
-        if (columnPreference) {
-            active = columnPreference.active;
-        } else if (columns && Array.isArray(columns) && columns.length > 0) {
-            active = columns.find((column)=>'name' in field && column.accessor === field.name)?.active;
-        } else if (activeColumnsIndices.length < 4) {
-            active = true;
-        }
-        if (active && !activeColumnsIndices.includes(index)) {
-            activeColumnsIndices.push(index);
-        }
-        const isFirstActiveColumn = activeColumnsIndices[0] === index;
-        const CustomLabelToRender = field && 'admin' in field && 'components' in field.admin && 'Label' in field.admin.components && field.admin.components.Label !== undefined // let it return `null`
-         ? field.admin.components.Label : undefined;
-        const Label = /*#__PURE__*/ _jsx(FieldLabel, {
-            Label: CustomLabelToRender,
-            label: 'label' in field ? field.label : undefined,
-            unstyled: true
-        });
-        const fieldAffectsDataSubFields = field && field.type && (field.type === 'array' || field.type === 'group' || field.type === 'blocks');
-        const Heading = /*#__PURE__*/ _jsx(SortColumn, {
-            Label: Label,
-            disable: fieldAffectsDataSubFields || field?._isPresentational || undefined,
-            label: 'label' in field ? field.label : undefined,
-            name: 'name' in field ? field.name : undefined
-        });
-        if (field) {
-            const column = {
-                Label,
-                accessor: 'name' in field ? field.name : undefined,
-                active,
-                cellProps: {
-                    field: {
-                        ...field || {},
-                        ...cellProps?.[index]?.field || {}
-                    },
-                    ...cellProps?.[index],
-                    link: isFirstActiveColumn
+    const CustomLabelToRender = field && 'admin' in field && 'components' in field.admin && 'Label' in field.admin.components && field.admin.components.Label !== undefined // let it return `null`
+    ? field.admin.components.Label : undefined;
+    const Label = /*#__PURE__*/_jsx(FieldLabel, {
+      field: field,
+      Label: CustomLabelToRender,
+      unstyled: true
+    });
+    const fieldAffectsDataSubFields = field && field.type && (field.type === 'array' || field.type === 'group' || field.type === 'blocks');
+    const Heading = /*#__PURE__*/_jsx(SortColumn, {
+      disable: fieldAffectsDataSubFields || field?._isPresentational || undefined,
+      Label: Label,
+      label: 'label' in field ? field.label : undefined,
+      name: 'name' in field ? field.name : undefined,
+      ...(sortColumnProps || {})
+    });
+    if (field) {
+      const column = {
+        accessor: 'name' in field ? field.name : undefined,
+        active,
+        cellProps: {
+          field: {
+            ...(field || {}),
+            admin: {
+              ...(field.admin || {}),
+              components: {
+                ...(field.admin?.components || {}),
+                Cell: field.admin?.components?.Cell || {
+                  type: 'client',
+                  Component: DefaultCell,
+                  RenderedComponent: null
                 },
-                components: {
-                    Cell: field.admin?.components?.Cell || {
-                        type: 'client',
-                        Component: DefaultCell,
-                        RenderedComponent: null
-                    },
-                    Heading
-                }
-            };
-            acc.push(column);
-        }
-        return acc;
-    }, []);
-    if (enableRowSelections) {
-        sorted.unshift({
-            Label: null,
-            accessor: '_select',
-            active: true,
-            components: {
-                Cell: {
-                    type: 'client',
-                    Component: null,
-                    RenderedComponent: /*#__PURE__*/ _jsx(SelectRow, {})
-                },
-                Heading: /*#__PURE__*/ _jsx(SelectAll, {})
+                Label
+              }
             }
-        });
+          }
+        },
+        Heading
+      };
+      acc.push(column);
     }
-    return sorted;
+    return acc;
+  }, []);
+  if (enableRowSelections) {
+    sorted.unshift({
+      accessor: '_select',
+      active: true,
+      cellProps: {
+        field: {
+          admin: {
+            components: {
+              Cell: {
+                type: 'client',
+                Component: null,
+                RenderedComponent: /*#__PURE__*/_jsx(SelectRow, {})
+              },
+              Label: null
+            }
+          }
+        }
+      },
+      Heading: /*#__PURE__*/_jsx(SelectAll, {})
+    });
+  }
+  if (beforeRows) {
+    sorted.unshift(...beforeRows);
+  }
+  return sorted;
 };
-
 //# sourceMappingURL=buildColumnState.js.map