playbook_ui 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
-import React, {useState} from "react";
-import { render, screen } from "../utilities/test-utils";
+import React, {useState} from "react"
+import { render, screen } from "../utilities/test-utils"
 
-import { AdvancedTable } from "../";
+import { AdvancedTable } from "../"
 
 const MOCK_DATA = [
   {
@@ -40,7 +40,7 @@ const MOCK_DATA = [
       },
     ],
   },
-];
+]
 
 const MOCK_DATA_LOADING = [
   {
@@ -70,7 +70,7 @@ const MOCK_DATA_LOADING = [
       },
     ],
   },
-];
+]
 
 const columnDefinitions = [
   {
@@ -86,11 +86,11 @@ const columnDefinitions = [
     accessor: "scheduledMeetings",
     label: "Scheduled Meetings",
   },
-];
+]
 
 const subRowHeaders = ["Quarter"]
 
-const testId = "advanced_table";
+const testId = "advanced_table"
 
 const AdvancedTableExpandControl = () => {
   const [expanded, setExpanded] = useState({'0': true})
@@ -109,7 +109,7 @@ return (
         tableData={MOCK_DATA}
     />
   </div>
-);
+)
 }
 
 const AdvancedTableSortControl = () => {
@@ -132,7 +132,7 @@ return (
         <AdvancedTable.Body />
       </AdvancedTable>
   </div>
-);
+)
 }
 
 const tableOptions = {
@@ -158,12 +158,12 @@ test("Generates default kit and classname", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
   expect(kit).toHaveClass('pb_advanced_table')
-});
+})
 
 test("Generates aria label", () => {
   render(
@@ -173,11 +173,11 @@ test("Generates aria label", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
-});
+})
 
 test("Row toggle button exists and toggles subrows open and closed", () => {
   render(
@@ -186,9 +186,9 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -196,7 +196,7 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   rowButton.click()
   const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
-});
+})
 
 test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
   render(
@@ -205,9 +205,9 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", ()
         data={{ testid: testId }}
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
   expect(toggleButton).toBeInTheDocument()
   const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -215,7 +215,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", ()
   toggleButton.click()
   const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
-});
+})
 
 test("loading state + initialLoadingRowCount prop", () => {
   render(
@@ -226,16 +226,16 @@ test("loading state + initialLoadingRowCount prop", () => {
         loading
         tableData={MOCK_DATA}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
 
   const tableBody = kit.querySelector('tbody')
   const tableRows = tableBody.getElementsByTagName('tr')
   expect(tableRows).toHaveLength(13)
-});
+})
 
 test("subRowHeaders are rendered", () => {
   render(
@@ -247,21 +247,21 @@ test("subRowHeaders are rendered", () => {
       <AdvancedTable.Header />
       <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
     </AdvancedTable>
-    );
+    )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
 
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   rowButton.click()
   
   const subRowHeader = kit.querySelector(".custom-row.bg-silver")
   expect(subRowHeader).toBeInTheDocument()
-});
+})
 
 test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
@@ -274,13 +274,13 @@ test("tableOptions prop functions as expected", () => {
         tableData={MOCK_DATA}
         tableOptions={tableOptions}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const row1 = kit.getElementsByTagName('tr')[1]
   
   expect(row1.id).toBe("1-1-0-row")
-});
+})
 
 test("tableProps prop functions as expected", () => {
   render(
@@ -290,12 +290,12 @@ test("tableProps prop functions as expected", () => {
         tableData={MOCK_DATA}
         tableProps={tableProps}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
-});
+})
 
 test("enableExpansionIcon changes icon", () => {
   render(
@@ -306,13 +306,13 @@ test("enableExpansionIcon changes icon", () => {
         tableProps={tableProps}
         toggleExpansionIcon= "chevron-up"
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const tableHead = kit.querySelector('table')
   const toggleIcon= tableHead.querySelector(".pb_icon_kit")
   expect(toggleIcon).toHaveClass("fa-chevron-up")
-});
+})
 
 test("sortIcon changes icon", () => {
   render(
@@ -328,18 +328,18 @@ test("sortIcon changes icon", () => {
       />
       <AdvancedTable.Body />
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector('.sort-button-icon')
   const icon= sortIcon.querySelector(".pb_icon_kit")
   expect(icon).toHaveClass("fa-chevron-down")
-});
+})
 
 test("Sort icon renders with enableSorting + sortControl works as expected", () => {
   render (<AdvancedTableSortControl/>)
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector(".sort-button-icon")
   expect(sortIcon).toBeInTheDocument()
 
@@ -358,9 +358,9 @@ test("sort button exists and sorts column data", () => {
       <AdvancedTable.Header enableSorting />
       <AdvancedTable.Body />
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
 
   const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
   expect(sortButton).toBeInTheDocument()
@@ -372,7 +372,7 @@ test("sort button exists and sorts column data", () => {
 
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
-}); 
+}) 
 
 test("Generates Table.Header default + custom classname", () => {
   render(
@@ -385,12 +385,12 @@ test("Generates Table.Header default + custom classname", () => {
       <AdvancedTable.Body />
 
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const tableHeader = kit.querySelector('thead')
   expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
-});
+})
 
 test("Generates Table.Body default + custom classname", () => {
   render(
@@ -403,12 +403,12 @@ test("Generates Table.Body default + custom classname", () => {
       <AdvancedTable.Body className="custom-body-classname"/>
 
     </AdvancedTable>
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const tableHeader = kit.querySelector('tbody')
   expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});
+})
 
 test("inlineRowLoading prop renders inline loading if true", () => {
   render(
@@ -418,12 +418,12 @@ test("inlineRowLoading prop renders inline loading if true", () => {
         inlineRowLoading
         tableData={MOCK_DATA_LOADING}
     />
-  );
+  )
 
-  const kit = screen.getByTestId(testId);
+  const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
-});
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../../"
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableCollapsibleTrail = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   return (
     <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
         <AdvancedTable.Body collapsibleTrail={false} />
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableCollapsibleTrail;
+export default AdvancedTableCollapsibleTrail

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md

@@ -1 +1 @@
-`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
+`collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../../"
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableDefault = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableDefault = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   return (
     <div>
@@ -43,7 +43,7 @@ const AdvancedTableDefault = (props) => {
           {...props}
       />
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableDefault;
+export default AdvancedTableDefault

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -8,7 +8,7 @@ For a visual of the data structure needed for `tableData`, see [here](https://gi
 
 ### columnDefinitions
 
-`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
+`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
 
 - `accessor`: this is the key from your data for the value you want rendered in that column
 - `label`: this is what will be rendered as the column header label

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React, { useState } from "react"
+import { AdvancedTable } from "../../"
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableExpandedControl = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableExpandedControl = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   //State for manually effecting what is expanded
   const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
@@ -53,7 +53,7 @@ const AdvancedTableExpandedControl = (props) => {
           {...props}
       />
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableExpandedControl;
+export default AdvancedTableExpandedControl

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
+import React from "react"
+import { AdvancedTable } from "../.."
+import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableInlineRowLoading = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   //Render the subRow header rows
   const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -52,7 +52,7 @@ const AdvancedTableInlineRowLoading = (props) => {
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableInlineRowLoading;
+export default AdvancedTableInlineRowLoading

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -1,4 +1,4 @@
-As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic]. 
+As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
 
 In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { AdvancedTable } from "../../";
+import React, { useState } from "react"
+import { AdvancedTable } from "../../"
 import { Button } from "../../"
-import { MOCK_DATA } from "./_mock_data";
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableLoading = (props) => {
 
@@ -37,7 +37,7 @@ const [isloading, setIsLoading] = useState(true)
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   return (
     <div>
@@ -54,7 +54,7 @@ const [isloading, setIsLoading] = useState(true)
           {...props}
       />
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableLoading;
+export default AdvancedTableLoading

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md

@@ -1,3 +1,3 @@
 the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../.."
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableSort = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSort = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   return (
     <div>
@@ -46,7 +46,7 @@ const AdvancedTableSort = (props) => {
         <AdvancedTable.Body />
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableSort;
+export default AdvancedTableSort

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA } from "./_mock_data";
+import React, { useState } from "react"
+import { AdvancedTable } from "../.."
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableSortControl = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSortControl = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   //State for sort direction
   const [isSortDesc, setIsSortDesc] = useState({desc: false})
@@ -57,7 +57,7 @@ const AdvancedTableSortControl = (props) => {
         <AdvancedTable.Body />
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableSortControl;
+export default AdvancedTableSortControl

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../.."
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableSubrowHeaders = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSubrowHeaders = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   //Render the subRow header rows
   const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -51,7 +51,7 @@ const AdvancedTableSubrowHeaders = (props) => {
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableSubrowHeaders;
+export default AdvancedTableSubrowHeaders

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../../"
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableTableOptions = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableOptions = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   const tableOptions = {
     initialState: {
@@ -55,7 +55,7 @@ const AdvancedTableTableOptions = (props) => {
           {...props}
       />
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableTableOptions;
+export default AdvancedTableTableOptions

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md

@@ -1,3 +1,3 @@
 The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit. 
 
-In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
+In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { AdvancedTable } from "../../";
-import { MOCK_DATA } from "./_mock_data";
+import React from "react"
+import { AdvancedTable } from "../../"
+import { MOCK_DATA } from "./_mock_data"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableProps = (props) => {
       accessor: "graduatedStudents",
       label: "Graduated Students",
     },
-  ];
+  ]
 
   const tableProps = {
     container: false,
@@ -49,7 +49,7 @@ const AdvancedTableTableProps = (props) => {
           {...props}
       />
     </div>
-  );
-};
+  )
+}
 
-export default AdvancedTableTableProps;
+export default AdvancedTableTableProps

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js

@@ -275,4 +275,4 @@ export const MOCK_DATA = [
       },
     ],
   },
-];
+]