@okta/odyssey-react-mui 1.47.0 → 1.48.0

package/dist/assets/DataTable.stories-9eBclyx2.js

@@ -0,0 +1,438 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{f as we}from"./index-BJMTVygn.js";import{r as n}from"./index-NdkWRN8K.js";import{O as Re}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{d as Se,c as xe}from"./personData-L8dJyb3X.js";import{M as Te}from"./Status-CdgTiE4c.js";import{M as f}from"./Box-B-R2QRDU.js";import{M as p}from"./Button-DPUOjyZy.js";import{d as $}from"./Typography-B7ktrxCD.js";import{M as ke,a as ve}from"./ArrowRight-BquvVn3D.js";import{d as E,M as h}from"./DataTable-BJQ8WkUd.js";import{M as V}from"./EmptyState-FpIKkMpd.js";import{M as R}from"./MenuItem-DoUaLmgU.js";/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const W=["paged","loadMore"],Me=({currentPage:d,currentNumberOfResults:a,isNextButtonDisabled:t,isPreviousButtonDisabled:s,onClickNext:o,onClickPrevious:l,paginationType:m})=>e.jsx(f,{sx:{display:"flex",gap:4,alignItems:"center"},children:m==="loadMore"?e.jsxs(e.Fragment,{children:[e.jsx(p,{isDisabled:t,label:"Show more",onClick:o,variant:"secondary"}),a&&e.jsxs($,{color:"textSecondary",children:[a," results"]})]}):e.jsxs(e.Fragment,{children:[e.jsx(p,{isDisabled:s,label:"Previous",onClick:l,startIcon:e.jsx(ke,{}),variant:"secondary"}),d&&e.jsx(f,{children:e.jsxs($,{color:"textSecondary",component:"span",children:["Page ",d]})}),e.jsx(p,{endIcon:e.jsx(ve,{}),isDisabled:t,label:"Next",onClick:o,variant:"secondary"})]})}),Pe=n.memo(Me);Pe.displayName="DataTablePagination";const g=[{accessorKey:"id",header:"Number"},{accessorKey:"name",header:"Name"},{accessorKey:"distance",header:"Distance from Sun (AU)"},{accessorKey:"visit",header:"Type of visit",filterVariant:"select",Cell:({cell:d})=>{const a=d.getValue(),t=a==="landing"?"success":a==="orbit"?"warning":"error";return e.jsx(Te,{label:a.charAt(0).toUpperCase()+a.slice(1),severity:t})},filterSelectOptions:[{label:"Flyby",value:"Flyby"},{label:"Orbit",value:"orbit"},{label:"Landing",value:"landing"}]}],D=[{id:1,name:"Mercury",distance:.4,visit:"landing"},{id:2,name:"Venus",distance:.7,visit:"landing"},{id:3,name:"Earth",distance:1,visit:"landing"},{id:4,name:"Mars",distance:1.5,visit:"landing"},{id:5,name:"Jupiter",distance:5.2,visit:"orbit"},{id:6,name:"Saturn",distance:9.6,visit:"landing"},{id:7,name:"Uranus",distance:19.2,visit:"flyby"},{id:8,name:"Neptune",distance:30,visit:"flyby"},{id:9,name:"Pluto",distance:39.5,visit:"flyby"}],Ie={component:h,decorators:[Re],argTypes:{columns:{description:"The columns that make up the table.",table:{type:{summary:"DataTableColumn<DataTableRowData>"}}},totalRows:{control:"number",description:`The total number of rows in the table. Optional, because it's sometimes impossible to calculate.Used in table pagination to know when to disable the "next"/"more" button.`,table:{type:{summary:"number"}}},getRowId:{description:"The function to get the ID of a row",table:{type:{summary:"((originalRow: MRT_RowData, index: number, parentRow: MRT_Row<MRT_RowData>) => string)"}}},initialDensity:{options:E,control:{type:"radio"},description:"The initial density (height & padding) of the table rows. This is available even if the table density isn't changeable by the end user via hasChangeableDensity.",table:{type:{summary:E.join(" | ")}}},hasChangeableDensity:{control:"boolean",description:"If true, the end user will be able to change the table density.",table:{type:{summary:"boolean"}}},hasColumnResizing:{control:"boolean",description:"If true, the end user can resize individual columns.",table:{type:{summary:"boolean"}}},hasColumnVisibility:{control:"boolean",description:"If true, the end user will be able to show/hide columns.",table:{type:{summary:"boolean"}}},hasFilters:{control:"boolean",description:"If true, the end user will be able to filter columns.",table:{type:{summary:"boolean"}}},hasPagination:{control:"boolean",description:"If true, the table will include pagination controls.",table:{type:{summary:"boolean"}}},hasRowSelection:{control:"boolean",description:"If true, the table will include checkboxes on each row, enabling the user to select some or all rows.",table:{type:{summary:"boolean"}}},hasSearch:{control:"boolean",description:"If true, the global table search controls will be shown.",table:{type:{summary:"boolean"}}},hasSorting:{control:"boolean",description:"If true, the end user can sort columns (ascending, descending, or neither)",table:{type:{summary:"boolean"}}},hasRowReordering:{control:"boolean",description:"If true, the end user can reorder rows via a drag-and-drop interface.",table:{type:{summary:"boolean"}}},hasSearchSubmitButton:{control:"boolean",description:"If true, the search field will include a Search button, rather than firing on input change.",table:{type:{summary:"boolean"}}},errorMessage:{control:"text",description:"If defined, the DataTable will indicate an error.",table:{type:{summary:"string"}}},searchDelayTime:{control:"number",description:"The debounce time, in milliseconds, for the search input firing `onChangeSearch` when changed. If `hasSearchSubmitButton` is true, this doesn't do anything.",table:{type:{summary:"number"}}},onChangeRowSelection:{description:"Callback that fires when a row (or rows) is selected or unselected.",table:{type:{summary:"(rowSelection: MRT_RowSelectionState) => void"}}},getData:{description:"Callback that fires whenever the table needs to fetch new data, due to changes in page, results per page, search input, filters, or sorting",table:{type:{summary:"({ page, resultsPerPage, search, filters, sort }: { page?: number; resultsPerPage?: number; search?: string; filters?: DataFilter[]; sort?: MRT_SortingState; }) => DataTableRowData"}}},onReorderRows:{description:"Callback that fires when the user reorders rows within the table. Can be used to propogate order change to the backend.",table:{type:{summary:"({ rowId, newRowIndex }: { rowId: string; newRowIndex: number; }) => void"}}},currentPage:{control:"number",description:"The current page number.",table:{type:{summary:"number"}}},resultsPerPage:{control:"number",description:"The number of results per page.",table:{type:{summary:"number"}}},isPaginationMoreDisabled:{control:"boolean",description:"If true, the pagination next or show more button will be disabled.",table:{type:{summary:"boolean"}}},maxPages:{control:"number",description:"The highest page number allowed to be manually input in pagination.",table:{type:{summary:"number"}}},maxResultsPerPage:{control:"number",description:"The largest number of rows allowed to be shown per page. This only affects the row input in pagination.",table:{type:{summary:"number"}}},paginationType:{options:W,control:{type:"radio"},description:'The type of pagination controls shown. Defaults to next/prev buttons, but can be set to a simple "Load more" button by setting to "loadMore".',table:{type:{summary:W.join(" | ")}}},rowActionButtons:{description:"Action buttons to display in each row.",table:{type:{summary:"(row: DataTableRowData) => ReactElement<typeof Button | typeof Fragment>"}}},rowActionMenuItems:{description:"Menu items to include in the optional actions menu on each row.",table:{type:{summary:'(row: DataTableRowData) => MenuButtonProps["children"]'}}},bulkActionMenuItems:{description:"Menu items to include in the bulk actions menu, which appears above the table if a row or rows are selected",table:{type:{summary:'(selectedRows: MRT_RowSelectionState) => MenuButtonProps["children"]'}}},emptyPlaceholder:{description:"The component to display when the table is displaying the initial empty state.",table:{type:{summary:"ReactElement<typeof EmptyState>"}}},noResultsPlaceholder:{description:"The component to display when the query returns no results.",table:{type:{summary:"ReactElement<typeof EmptyState>"}}},renderDetailPanel:{description:"The optional component to display when expanding a row.",table:{type:{summary:"(props: { row: MRT_Row<MRT_RowData>; table: MRT_TableInstance<MRT_RowData>; }) => ReactNode"}}},additionalActionButton:{description:"An optional action button above the table.",table:{type:{summary:"ReactNode"}}},additionalActionMenuItems:{description:"MenuItems that go in an optional action menu above the table.",table:{type:{summary:"ReactNode"}}}},args:{onChangeRowSelection:we()}},w=({data:d,...a})=>{let t=d;const{search:s,filters:o,sort:l,page:m=1,resultsPerPage:r=20}=a;s&&(t=t.filter(u=>Object.values(u).some(y=>y.toString().toLowerCase().includes(s.toLowerCase())))),o&&(t=t.filter(u=>o.every(({id:y,value:b})=>{var x,T;if(b==null)return!0;if(Array.isArray(b))return b.some(C=>{var L;return typeof C=="string"?(L=u[y])==null?void 0:L.toString().toLowerCase().includes(C.toString().toLowerCase()):!1});if(y==="startLetter"&&typeof u.name=="string"){const C=(x=u.name[0])==null?void 0:x.toLowerCase();return b==="vowel"?"aeiou".includes(C):b==="consonant"?!"aeiou".includes(C):!0}return(T=u[y])==null?void 0:T.toString().toLowerCase().includes(b.toString().toLowerCase())}))),l&&l.length>0&&t.sort((u,y)=>{for(const{id:b,desc:x}of l){const T=u[b],C=y[b];if(T<C)return x?1:-1;if(T>C)return x?-1:1}return 0});const i=(m-1)*r,c=i+r;return t=t.slice(i,c),t},S=({data:d,...a})=>{const t=d,{rowId:s,newRowIndex:o}=a,l=t.findIndex(m=>m.id===s);if(l!==-1){const[m]=t.splice(l,1);t.splice(o,0,m)}return t},k={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t,s]=n.useState(D),o=n.useCallback(({...r})=>w({data:t,...r}),[t]),l=n.useCallback(({...r})=>{const i=S({data:t,...r});s(i)},[t]),m=n.useCallback(r=>{Object.keys(r).length>0&&console.log(`${Object.keys(r).length} selected`)},[]);return e.jsx(h,{...a,columns:g,getData:o,onChangeRowSelection:m,onReorderRows:l})}},v={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!0,hasFilters:!0,hasPagination:!0,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!0,totalRows:200},render:function(a){const[t,s]=n.useState(Se),o=n.useCallback(({...u})=>w({data:t,...u}),[t]),l=n.useCallback(({...u})=>{const y=S({data:t,...u});s(y)},[t]),m=n.useCallback(u=>{Object.keys(u).length>0&&console.log(`${Object.keys(u).length} selected`)},[]),r=n.useMemo(()=>e.jsx(V,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:e.jsx(p,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:e.jsx(p,{label:"Secondary",variant:"secondary"})}),[]),i=n.useMemo(()=>e.jsx(V,{description:"You should try searching or filtering for something else.",heading:"Whoops, there's nothing here!"}),[]),c=u=>e.jsxs(e.Fragment,{children:[e.jsx(R,{onClick:()=>console.log(u),children:"Action 1"}),e.jsx(R,{onClick:()=>console.log(u),children:"Action 2"})]});return e.jsx(h,{...a,bulkActionMenuItems:c,columns:xe,emptyPlaceholder:r,getData:o,noResultsPlaceholder:i,onChangeRowSelection:m,onReorderRows:l,rowActionMenuItems:c})}},M={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t,s]=n.useState(D),o=n.useCallback(({...r})=>{const i=S({data:t,...r});s(i)},[t]),l=n.useCallback(r=>{Object.keys(r).length>0&&console.log(`${Object.keys(r).length} selected`)},[]),m=n.useMemo(()=>e.jsx(V,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:e.jsx(p,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:e.jsx(p,{label:"Secondary",variant:"secondary"})}),[]);return e.jsx(h,{...a,columns:g,emptyPlaceholder:m,getData:()=>[],onChangeRowSelection:l,onReorderRows:o})}},P={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t,s]=n.useState(D),o=n.useCallback(({...r})=>w({data:t,...r}),[t]),l=n.useCallback(({...r})=>{const i=S({data:t,...r});s(i)},[t]),m=n.useMemo(()=>[...g,{id:"startLetter",label:"Name starting with...",render:r=>e.jsxs(f,{sx:{display:"flex",flexDirection:"column",alignContent:"stretch",gap:2},children:[e.jsx(f,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:e.jsx(p,{isFullWidth:!0,label:"Vowel",onClick:()=>r({filterId:"startLetter",value:"vowel"}),variant:"secondary"})}),e.jsx(f,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:e.jsx(p,{isFullWidth:!0,label:"Consonant",onClick:()=>r({filterId:"startLetter",value:"consonant"}),variant:"secondary"})}),e.jsx(f,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:e.jsx(p,{isFullWidth:!0,label:"Any",onClick:()=>r({filterId:"startLetter",value:"any"}),variant:"secondary"})})]})}],[]);return e.jsx(h,{...a,columns:g,filters:m,getData:o,onReorderRows:l})}},I={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t,s]=n.useState(D),o=n.useCallback(({...i})=>w({data:t,...i}),[t]),l=n.useCallback(({...i})=>{const c=S({data:t,...i});s(c)},[t]),m=n.useCallback(i=>{Object.keys(i).length>0&&console.log(`${Object.keys(i).length} selected`)},[]),r=n.useMemo(()=>[...g.filter(c=>c.id!=="visit"),{id:"visit",label:"Type of visit 🚀",render:c=>e.jsxs(f,{children:[e.jsx(p,{label:"🛬 Landing",onClick:()=>c({filterId:"visit",value:"landing"}),variant:"secondary"}),e.jsx(p,{label:"🛰️ Orbit",onClick:()=>c({filterId:"visit",value:"orbit"}),variant:"secondary"}),e.jsx(p,{label:"🛸 Flyby",onClick:()=>c({filterId:"visit",value:"flyby"}),variant:"secondary"}),e.jsx(p,{label:"🤷‍♂️ Any",onClick:()=>c({filterId:"visit",value:""}),variant:"secondary"})]})}],[]);return e.jsx(h,{...a,columns:g,filters:r,getData:o,onChangeRowSelection:m,onReorderRows:l})}},j={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t]=n.useState(D),s=n.useCallback(({...l})=>w({data:t,...l}),[t]),o=n.useMemo(()=>[...g,{id:"startLetter",label:"Starting letter",variant:"select",options:[{label:"Vowel",value:"vowel"},{label:"Consonant",value:"consonant"}]}],[]);return e.jsx(h,{...a,columns:g,filters:o,getData:s})}},A={render:function(){const a=D,t=n.useCallback(({...o})=>w({data:a,...o}),[a]),s=n.useCallback(({row:o})=>e.jsx(f,{children:`This planet is ${o.original.name}.`}),[]);return e.jsx(h,{columns:g,getData:t,renderDetailPanel:s})}},F={render:function(){const a=D,t=n.useCallback(({...o})=>w({data:a,...o}),[a]),s=n.useCallback(({row:o})=>{if(o.original.visit!=="landing")return e.jsx(f,{children:`Humanity has not landed on ${o.original.name} (yet).`})},[]);return e.jsx(h,{columns:g,getData:t,renderDetailPanel:s})}},B={render:function(){const a=n.useMemo(()=>[{accessorKey:"truncated",header:"Truncated"},{accessorKey:"wrapped",header:"Wrapped",hasTextWrapping:!0}],[]),t=n.useCallback(()=>{const s=[];return Array(10).fill(null).forEach(()=>{s.push({truncated:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",wrapped:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."})}),s},[]);return e.jsx(h,{columns:a,getData:t,hasColumnResizing:!0})}},O={render:function(){const a=n.useMemo(()=>[{accessorKey:"name",header:"Name",grow:!0},{accessorKey:"apps",header:"Apps"},{accessorKey:"users",header:"Users assigned"}],[]),t=n.useCallback(()=>[{name:"Core engineering access",apps:5,users:10},{name:"Core sales access",apps:8,users:28},{name:"Super user access",apps:3,users:1}],[]),s=o=>e.jsxs(e.Fragment,{children:[e.jsx(R,{onClick:()=>console.log(o),children:"Action 1"}),e.jsx(R,{onClick:()=>console.log(o),children:"Action 2"})]});return e.jsx(h,{columns:a,getData:t,hasColumnResizing:!0,hasSearch:!0,hasSorting:!0,rowActionMenuItems:s})}},z={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function(a){const[t,s]=n.useState(D),o=n.useCallback(({...c})=>w({data:t,...c}),[t]),l=n.useCallback(({...c})=>{const u=S({data:t,...c});s(u)},[t]),m=n.useCallback(c=>{Object.keys(c).length>0&&console.log(`${Object.keys(c).length} selected`)},[]),r=e.jsx(p,{label:"Add widget",variant:"primary"}),i=e.jsxs(e.Fragment,{children:[e.jsx(R,{onClick:()=>console.log("Action 1"),children:"Action 1"}),e.jsx(R,{onClick:()=>console.log("Action 2"),children:"Action 2"})]});return e.jsx(h,{...a,additionalActionButton:r,additionalActionMenuItems:i,columns:g,getData:o,onChangeRowSelection:m,onReorderRows:l})}};var _,K,G;k.parameters={...k.parameters,docs:{...(_=k.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Planet[]>(planetData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const onChangeRowSelection = useCallback((rowSelection: DataTableRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(\`\${Object.keys(rowSelection).length} selected\`);
+      }
+    }, []);
+    return <DataTable {...props} columns={planetColumns} getData={getData} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} />;
+  }
+}`,...(G=(K=k.parameters)==null?void 0:K.docs)==null?void 0:G.source}}};var N,U,q;v.parameters={...v.parameters,docs:{...(N=v.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasFilters: true,
+    hasPagination: true,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: true,
+    totalRows: 200
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Person[]>(personData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const onChangeRowSelection = useCallback((rowSelection: DataTableRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(\`\${Object.keys(rowSelection).length} selected\`);
+      }
+    }, []);
+    const emptyPlaceholder = useMemo(() => <EmptyState description="All relevant data will be displayed and can be searched and filtered" heading="Start by adding data assets" PrimaryCallToActionComponent={<Button label="Primary" variant="primary" />} SecondaryCallToActionComponent={<Button label="Secondary" variant="secondary" />} />, []);
+    const noResultsPlaceholder = useMemo(() => <EmptyState description="You should try searching or filtering for something else." heading="Whoops, there's nothing here!" />, []);
+    const actionMenuItems = (selectedRows: DataTableRowSelectionState) => <>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 1</MenuItem>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 2</MenuItem>
+      </>;
+    return <DataTable {...props} bulkActionMenuItems={actionMenuItems} columns={personColumns} emptyPlaceholder={emptyPlaceholder} getData={getData} noResultsPlaceholder={noResultsPlaceholder} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} rowActionMenuItems={actionMenuItems} />;
+  }
+}`,...(q=(U=v.parameters)==null?void 0:U.docs)==null?void 0:q.source}}};var H,Y,J;M.parameters={...M.parameters,docs:{...(H=M.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Planet[]>(planetData);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const onChangeRowSelection = useCallback((rowSelection: DataTableRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(\`\${Object.keys(rowSelection).length} selected\`);
+      }
+    }, []);
+    const emptyPlaceholder = useMemo(() => <EmptyState description="All relevant data will be displayed and can be searched and filtered" heading="Start by adding data assets" PrimaryCallToActionComponent={<Button label="Primary" variant="primary" />} SecondaryCallToActionComponent={<Button label="Secondary" variant="secondary" />} />, []);
+    return <DataTable {...props} columns={planetColumns} emptyPlaceholder={emptyPlaceholder} getData={() => []} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} />;
+  }
+}`,...(J=(Y=M.parameters)==null?void 0:Y.docs)==null?void 0:J.source}}};var Q,X,Z;P.parameters={...P.parameters,docs:{...(Q=P.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Planet[]>(planetData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const filters = useMemo(() => [...planetColumns, {
+      id: "startLetter",
+      label: "Name starting with...",
+      render: (updateFilters: UpdateFiltersOrValues) => <Box sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignContent: "stretch",
+        gap: 2
+      }}>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Vowel" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "vowel"
+          })} variant="secondary" />
+              </Box>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Consonant" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "consonant"
+          })} variant="secondary" />
+              </Box>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Any" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "any"
+          })} variant="secondary" />
+              </Box>
+            </Box>
+    }], []);
+    return <DataTable {...props} columns={planetColumns} filters={filters} getData={getData} onReorderRows={onReorderRows} />;
+  }
+}`,...(Z=(X=P.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var ee,te,ne;I.parameters={...I.parameters,docs:{...(ee=I.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Planet[]>(planetData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const onChangeRowSelection = useCallback((rowSelection: DataTableRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(\`\${Object.keys(rowSelection).length} selected\`);
+      }
+    }, []);
+    const filters = useMemo(() => {
+      // Filter out the column with the id of "type"
+      const filteredPlanetColumns = planetColumns.filter(column => column.id !== "visit");
+      return [...filteredPlanetColumns, {
+        id: "visit",
+        label: "Type of visit 🚀",
+        render: (updateFilters: UpdateFiltersOrValues) => <Box>
+              <Button label="🛬 Landing" onClick={() => updateFilters({
+            filterId: "visit",
+            value: "landing"
+          })} variant="secondary" />
+              <Button label="🛰️ Orbit" onClick={() => updateFilters({
+            filterId: "visit",
+            value: "orbit"
+          })} variant="secondary" />
+              <Button label="🛸 Flyby" onClick={() => updateFilters({
+            filterId: "visit",
+            value: "flyby"
+          })} variant="secondary" />
+              <Button label="🤷‍♂️ Any" onClick={() => updateFilters({
+            filterId: "visit",
+            value: ""
+          })} variant="secondary" />
+            </Box>
+      }];
+    }, []);
+    return <DataTable {...props} columns={planetColumns} filters={filters} getData={getData} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} />;
+  }
+}`,...(ne=(te=I.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var ae,oe,se;j.parameters={...j.parameters,docs:{...(ae=j.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data] = useState<Planet[]>(planetData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const filters = useMemo<DataTableProps["filters"]>(() => {
+      return [...planetColumns, {
+        id: "startLetter",
+        label: "Starting letter",
+        variant: "select",
+        options: [{
+          label: "Vowel",
+          value: "vowel"
+        }, {
+          label: "Consonant",
+          value: "consonant"
+        }]
+      }];
+    }, []);
+    return <DataTable {...props} columns={planetColumns} filters={filters} getData={getData} />;
+  }
+}`,...(se=(oe=j.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var re,le,ie;A.parameters={...A.parameters,docs:{...(re=A.parameters)==null?void 0:re.docs,source:{originalSource:`{
+  render: function C() {
+    const data = planetData;
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const renderDetailPanel = useCallback(({
+      row
+    }: DataTableRenderDetailPanelType) => {
+      return <Box>{\`This planet is \${row.original.name}.\`}</Box>;
+    }, []);
+    return <DataTable columns={planetColumns} getData={getData} renderDetailPanel={renderDetailPanel} />;
+  }
+}`,...(ie=(le=A.parameters)==null?void 0:le.docs)==null?void 0:ie.source}}};var ce,ue,de;F.parameters={...F.parameters,docs:{...(ce=F.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  render: function C() {
+    const data = planetData;
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const renderDetailPanel = useCallback(({
+      row
+    }: DataTableRenderDetailPanelType) => {
+      if (row.original.visit === "landing") return;
+      return <Box>{\`Humanity has not landed on \${row.original.name} (yet).\`}</Box>;
+    }, []);
+    return <DataTable columns={planetColumns} getData={getData} renderDetailPanel={renderDetailPanel} />;
+  }
+}`,...(de=(ue=F.parameters)==null?void 0:ue.docs)==null?void 0:de.source}}};var me,pe,he;B.parameters={...B.parameters,docs:{...(me=B.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  render: function C() {
+    const columns = useMemo(() => [{
+      accessorKey: "truncated",
+      header: "Truncated"
+    }, {
+      accessorKey: "wrapped",
+      header: "Wrapped",
+      hasTextWrapping: true
+    }], []);
+    const getData = useCallback(() => {
+      const data: Array<{
+        truncated: string;
+        wrapped: string;
+      }> = [];
+      Array(10).fill(null).forEach(() => {
+        data.push({
+          truncated: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",
+          wrapped: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."
+        });
+      }); // Corrected the missing parenthesis here
+      return data;
+    }, []);
+    return <DataTable columns={columns} getData={getData} hasColumnResizing />;
+  }
+}`,...(he=(pe=B.parameters)==null?void 0:pe.docs)==null?void 0:he.source}}};var ge,be,ye;O.parameters={...O.parameters,docs:{...(ge=O.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  render: function C() {
+    const columns = useMemo((): DataTableColumn<DataTableRowData>[] => [{
+      accessorKey: "name",
+      header: "Name",
+      grow: true
+    }, {
+      accessorKey: "apps",
+      header: "Apps"
+    }, {
+      accessorKey: "users",
+      header: "Users assigned"
+    }], []);
+    const getData = useCallback(() => [{
+      name: "Core engineering access",
+      apps: 5,
+      users: 10
+    }, {
+      name: "Core sales access",
+      apps: 8,
+      users: 28
+    }, {
+      name: "Super user access",
+      apps: 3,
+      users: 1
+    }], []);
+    const actionMenuItems = (selectedRows: DataTableRowSelectionState) => <>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 1</MenuItem>
+        <MenuItem onClick={() => console.log(selectedRows)}>Action 2</MenuItem>
+      </>;
+    return <DataTable columns={columns} getData={getData} hasColumnResizing hasSearch hasSorting rowActionMenuItems={actionMenuItems} />;
+  }
+}`,...(ye=(be=O.parameters)==null?void 0:be.docs)==null?void 0:ye.source}}};var fe,Ce,De;z.parameters={...z.parameters,docs:{...(fe=z.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C(props) {
+    const [data, setData] = useState<Planet[]>(planetData);
+    const getData = useCallback(({
+      ...props
+    }: DataTableGetDataType) => {
+      return filterData({
+        data,
+        ...props
+      });
+    }, [data]);
+    const onReorderRows = useCallback(({
+      ...props
+    }: DataTableOnReorderRowsType) => {
+      const reorderedData = reorderData({
+        data,
+        ...props
+      });
+      setData(reorderedData);
+    }, [data]);
+    const onChangeRowSelection = useCallback((rowSelection: DataTableRowSelectionState) => {
+      if (Object.keys(rowSelection).length > 0) {
+        console.log(\`\${Object.keys(rowSelection).length} selected\`);
+      }
+    }, []);
+    const additionalActionButton = <Button label="Add widget" variant="primary" />;
+    const additionalActionMenuItems = <>
+        <MenuItem onClick={() => console.log("Action 1")}>Action 1</MenuItem>
+        <MenuItem onClick={() => console.log("Action 2")}>Action 2</MenuItem>
+      </>;
+    return <DataTable {...props} additionalActionButton={additionalActionButton} additionalActionMenuItems={additionalActionMenuItems} columns={planetColumns} getData={getData} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} />;
+  }
+}`,...(De=(Ce=z.parameters)==null?void 0:Ce.docs)==null?void 0:De.source}}};const je=["Default","API","Empty","CustomFilters","FilterWithCustomRender","CustomFilterWithDefaultVariant","Details","ConditionalDetails","Truncation","ColumnGrowDemo","AdditionalActions"],Ne=Object.freeze(Object.defineProperty({__proto__:null,API:v,AdditionalActions:z,ColumnGrowDemo:O,ConditionalDetails:F,CustomFilterWithDefaultVariant:j,CustomFilters:P,Default:k,Details:A,Empty:M,FilterWithCustomRender:I,Truncation:B,__namedExportsOrder:je,default:Ie},Symbol.toStringTag,{value:"Module"}));export{v as A,P as C,Ne as D,M as E,I as F,k as a,j as b};