playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54d0fea32b7f3d4e5aba4900e63c7c5d3c3fa2fde7eb40023db9161ce687b59b
-  data.tar.gz: b150e8eb3b1a4e3e58c815cacbac0caff8c4b24f98e7eb25ebe0b86564090a2f
+  metadata.gz: 29999d280f49fac0febbbb14cf22004a252aab3387af1d39edafca4cc2e0852c
+  data.tar.gz: 0e8f106c77c37528bef3310388435c63917090e93642dd5cf1b586eb2afea3b7
 SHA512:
-  metadata.gz: b4b1941d8d6c8473f8061f329012a8571328556829ed46bf1e7ac9da918b18b5f78f2841d015893bcb23f0250d9a7d30ae6fa2730e88430f4ed0ec633b583d28
-  data.tar.gz: 0c5967fdd0a1fd7af31ecde3f26f82daff27f46b360b0f1a1fc9fa3f0d53ef4c90c9d57dfdc8a8de9625ac07376f77bc6dc8711a906cca86d4486a06a3883534
+  metadata.gz: 95ec7db3153f2fea683909fc058a3f6ad1a0cd84dbb3954d5545234a98ac56e1614735a70e2ab3e47200010bde3055b005ced52e2ca996a7540d3cba854a3ee5
+  data.tar.gz: 909e9c77563d5a963b919c774bdc40ff892a1c462156229a10190305ec96e118110ab6a23e54fa54d4190f72f548290edc7ec60cd5a03ca3ff03bfa5d1512e1e

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -15,8 +14,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_contact/contact';
 @import 'pb_copy_button/copy_button';
+@import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -46,7 +45,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -111,7 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts

@@ -3,4 +3,4 @@ import { ExpandedState } from "@tanstack/react-table"
 export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
->
+>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -7,7 +7,6 @@
 @import "./scss_partials/chrome_styles";
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -102,15 +101,6 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
-    // Right align header content of first data column in selectable row no subrow setup
-    &.selectable-rows-enabled {
-      tr { 
-        th:nth-child(2),
-        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
-          justify-content: flex-end;
-        }
-      }
-    }
 
     // Set fixed width for header cells to match table body
     th {
@@ -122,8 +112,7 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom, 
-      &.checkbox-cell.checkbox-cell-header {
+      &.table-header-cells-custom {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
@@ -172,22 +161,6 @@
         }
       }
     }
-    td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
-        padding: 0 $space_xxs;
-        font-size: 14px;
-        text-align: right;
-      }
-    }
-    // Right align row content of first data column in selectable row no subrow setup
-    &.selectable-rows-enabled {
-      tr {
-        td:nth-child(2),
-        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none {
-          justify-content: end;
-        }
-      }
-    }
   }
 
   .table-header-cells-active:first-child {
@@ -230,53 +203,6 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-  
-  // Fullscreen
-  &.advanced-table-allow-fullscreen {
-    transition: all 0.3s ease;
-  }
-  
-  &.advanced-table-fullscreen {
-    background-color: $bg_light;
-    box-sizing: border-box;
-    height: 100vh;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-
-    .pb_table {
-      th, td, div, button {
-        font-size: calc(100%);
-      }
-      box-sizing: border-box;
-      margin: $space_lg;
-      max-width: calc(100% - 64px);
-      width: calc(100% - 64px);
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        position: sticky !important;
-        top: 44px !important;
-        z-index: $z_10;
-      }
-    }
-  }
-  
-  .advanced-table-fullscreen-header {
-    background-color: $white;
-    height: 44px;
-    padding: 13px 20px;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-  }
-
   // Icons
   .button-icon {
     display: flex;
@@ -325,22 +251,11 @@
     }
   }
 
-  .fullscreen-icon {
-    @extend .button-icon;
-    @extend %primary-color-pseudo;
-    padding: 2px 0;
-
-    &:focus-visible {
-      border-radius: $border_rad_lighter;
-    }
-  }
-
   // Vertical separator
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  .pb_table_td:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
@@ -396,7 +311,6 @@
       .table-header-cells:first-child,
       td:first-child,
       .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child,
       [class*="pinned-left"] {
           background-color: $white;
           box-shadow: $shadow_deep !important;
@@ -514,28 +428,6 @@
         ) !important;
       }
     }
-
-    // Vertical separator
-    .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
-      box-shadow: 1px 0px 0px 0px $border_dark !important;
-    }
-
-    // Fullscreen
-    &.advanced-table-fullscreen {
-      background: $bg_dark;
-    }
-
-    .advanced-table-fullscreen-header {
-      background-color: $bg_dark_card;
-      position: sticky;
-      top: 0;
-      z-index: $z_10;
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
@@ -560,7 +452,6 @@
         .table-header-cells:first-child,
         td:first-child,
         .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child,
         [class*="pinned-left"] {
           background: $bg_dark_card;
           border-right: $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -19,15 +19,6 @@ import TableActionBar from "./Components/TableActionBar";
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
 
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
-
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
@@ -58,8 +49,6 @@ type AdvancedTableProps = {
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
@@ -93,8 +82,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   // Component refs
@@ -159,68 +146,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
-
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
-
-  useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
-
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
-
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header" 
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
-
-  useEffect(() => {
-    if (!allowFullScreen) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
-
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -229,10 +154,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
-    {
-      'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen
-    },
     globalProps(props),
     className
   );
@@ -246,97 +167,93 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <>
-      {/* Top Pagination */}
-      {pagination && (
-        <TablePagination
-            onChange={onPageChange}
-            position="top"
-            range={paginationProps?.range}
-            table={table}
-        />
-      )}
-
-      <div
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-            e.currentTarget,
-            fetchNextPage,
-            isFetching,
-            totalFetched,
-            fullData.length
-          ) : undefined}
-          ref={tableWrapperRef}
-          style={tableWrapperStyle as React.CSSProperties}
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+          e.currentTarget,
+          fetchNextPage,
+          isFetching,
+          totalFetched,
+          fullData.length
+        ) : undefined}
+        ref={tableWrapperRef}
+        style={tableWrapperStyle as React.CSSProperties}
+    >
+      <AdvancedTableProvider
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion={enableToggleExpansion}
+          enableVirtualization={virtualizedRows}
+          expanded={expanded}
+          expandedControl={expandedControl}
+          handleExpandOrCollapse={handleExpandOrCollapse}
+          hasAnySubRows={hasAnySubRows}
+          inlineRowLoading={inlineRowLoading}
+          isActionBarVisible={isActionBarVisible}
+          loading={loading}
+          responsive={responsive}
+          selectableRows={selectableRows}
+          setExpanded={setExpanded}
+          showActionsBar={showActionsBar}
+          sortControl={sortControl}
+          subRowHeaders={tableOptions?.subRowHeaders}
+          table={table}
+          tableContainerRef={tableWrapperRef}
+          toggleExpansionIcon={toggleExpansionIcon}
+          virtualizedRows={virtualizedRows}
       >
-        {renderFullscreenHeader()}
-        <AdvancedTableProvider
-            columnDefinitions={columnDefinitions}
-            enableToggleExpansion={enableToggleExpansion}
-            enableVirtualization={virtualizedRows}
-            expanded={expanded}
-            expandedControl={expandedControl}
-            handleExpandOrCollapse={handleExpandOrCollapse}
-            hasAnySubRows={hasAnySubRows}
-            inlineRowLoading={inlineRowLoading}
-            isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
-            loading={loading}
-            responsive={responsive}
-            selectableRows={selectableRows}
-            setExpanded={setExpanded}
-            showActionsBar={showActionsBar}
-            sortControl={sortControl}
-            subRowHeaders={tableOptions?.subRowHeaders}
-            table={table}
-            tableContainerRef={tableWrapperRef}
-            toggleExpansionIcon={toggleExpansionIcon}
-            virtualizedRows={virtualizedRows}
-        >
-          <React.Fragment>
-            {/* Selection Action Bar */}
-            <TableActionBar
-                actions={actions}
-                isVisible={isActionBarVisible}
-                selectedCount={selectedRowsLength}
+        <React.Fragment>
+          {/* Top Pagination */}
+          {pagination && (
+            <TablePagination
+                onChange={onPageChange}
+                position="top"
+                range={paginationProps?.range}
+                table={table}
             />
+          )}
+
+          {/* Selection Action Bar */}
+          <TableActionBar
+              actions={actions}
+              isVisible={isActionBarVisible}
+              selectedCount={selectedRowsLength}
+          />
 
-            {/* Main Table */}
-            <Table
-                className={`${loading ? "content-loading" : ""}`}
-                dark={dark}
-                dataTable
-                numberSpacing="tabular"
-                responsive="none"
-                {...tableProps}
-            >
-              {children ? (
-                children
-              ) : (
-                <>
-                  <TableHeader />
-                  <TableBody />
-                </>
-              )}
-            </Table>
-          </React.Fragment>
-        </AdvancedTableProvider>
-     
-      </div>
-      {/* Bottom Pagination */}
-      {pagination && (
-        <TablePagination
-            onChange={onPageChange}
-            position="bottom"
-            range={paginationProps?.range}
-            table={table}
-        />
-      )}
-    </>
+          {/* Main Table */}
+          <Table
+              className={`${loading ? "content-loading" : ""}`}
+              dark={dark}
+              dataTable
+              numberSpacing="tabular"
+              responsive="none"
+              {...tableProps}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <TableHeader />
+                <TableBody />
+              </>
+            )}
+          </Table>
+
+          {/* Bottom Pagination */}
+          {pagination && (
+            <TablePagination
+                onChange={onPageChange}
+                position="bottom"
+                range={paginationProps?.range}
+                table={table}
+            />
+          )}
+        </React.Fragment>
+      </AdvancedTableProvider>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,8 +20,6 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -34,14 +32,6 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
-
-      def selected_rows
-        @selected_rows ||= []
-      end
-
-      def selected_rows_length
-        selected_rows.length
-      end
     end
   end
 end

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

@@ -149,7 +149,7 @@ return (
         data={{testid: testId}}
         sortControl={sortControl}
         tableData={MOCK_DATA}
-    >
+      >
         <AdvancedTable.Header enableSorting />
         <AdvancedTable.Body />
       </AdvancedTable>
@@ -338,8 +338,8 @@ test("enableExpansionIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const tableHead = kit.querySelector('table')
-  const toggleIcon = tableHead.querySelector(".pb_custom_icon")
-  expect(toggleIcon).toBeInTheDocument()
+  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
+  expect(toggleIcon).toHaveClass("fa-chevron-up")
 })
 
 test("sortIcon changes icon", () => {
@@ -360,8 +360,8 @@ test("sortIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector('.sort-button-icon')
-  const icon = sortIcon.querySelector(".pb_custom_icon")
-  expect(icon).toBeInTheDocument()
+  const icon= sortIcon.querySelector(".pb_icon_kit")
+  expect(icon).toHaveClass("fa-chevron-down")
 })
 
 test("Sort icon renders with enableSorting + sortControl works as expected", () => {
@@ -452,7 +452,7 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   rowButton.click()
-  const inlineLoading = kit.querySelector(".pb_custom_icon")
+  const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
 })
 
@@ -498,17 +498,4 @@ test("customRenderer prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
   expect(pill).toBeInTheDocument()
-})
-
-test("allowFullScreen prop adds fullscreen class", () => {
-  render(
-    <AdvancedTable
-        allowFullScreen
-        columnDefinitions={columnDefinitions}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
-})
+})

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeaders = (props) => {

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

@@ -1,7 +1,5 @@
 import React from "react"
-import AdvancedTable from "../../pb_advanced_table/_advanced_table"
-import Pill from "../../pb_pill/_pill"
-
+import { AdvancedTable, Pill } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeadersCustomCell = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnHeadersMultiple = (props) => {

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

@@ -1,12 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Pill from "../../pb_pill/_pill"
-import Body from "../../pb_body/_body"
-import Flex from "../../pb_flex/_flex"
-import Detail from "../../pb_detail/_detail"
-import Caption from "../../pb_caption/_caption"
-import Badge from "../../pb_badge/_badge"
-import Title from "../../pb_title/_title"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {