@bcgov-sso/common-react-components 2.0.0 → 2.1.1

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
 import * as _button_inc_component_library_Button from '@button-inc/component-library/Button';
+import { ColumnDef } from '@tanstack/react-table';
 import * as rc_tabs_lib_TabPanelList_TabPane from 'rc-tabs/lib/TabPanelList/TabPane';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
@@ -38,15 +39,12 @@ interface Props$4 {
 }
 declare const Alert: (props: Props$4) => React__default.JSX.Element;
 
-interface Column {
-    header: string;
-    accessorKey: string;
-}
-interface TableProps {
+interface TableProps<T extends object> {
     variant?: string;
     readOnly?: boolean;
-    columns: Column[];
-    data: unknown[];
+    columns: ColumnDef<T, any>[];
+    hiddenColumns?: string[];
+    data: T[];
     onRowSelect?: Function;
     defaultPageSize?: number;
     enableGlobalSearch?: boolean;
@@ -56,7 +54,7 @@ interface TableProps {
     pageSizeOptions?: number[];
     noDataFoundText?: string;
 }
-declare const Table: ({ variant, columns, data, readOnly, onRowSelect, defaultPageSize, enableGlobalSearch, globalSearchPlaceholder, globalSearchStyle, enablePagination, pageSizeOptions, noDataFoundText, }: TableProps) => React__default.JSX.Element;
+declare const Table: <T extends object>({ variant, columns, hiddenColumns, data, readOnly, onRowSelect, defaultPageSize, enableGlobalSearch, globalSearchPlaceholder, globalSearchStyle, enablePagination, pageSizeOptions, noDataFoundText, }: TableProps<T>) => React__default.JSX.Element;
 
 declare const StyledTabs: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<rc_tabs.TabsProps & React.RefAttributes<HTMLDivElement>, never>> & string & Omit<React.ForwardRefExoticComponent<rc_tabs.TabsProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
 

package/dist/index.esm.js

@@ -24195,7 +24195,7 @@ const StyledTable = dt$1.table `
     overflow: hidden;
   }
 `;
-const Table = ({ variant = 'default', columns = [], data = [], readOnly = false, onRowSelect = (rowData) => { }, defaultPageSize = 5, enableGlobalSearch = true, globalSearchPlaceholder = 'Search all columns...', globalSearchStyle = {}, enablePagination = true, pageSizeOptions = [5, 10, 20, 30, 40, 50], noDataFoundText = 'No data found', }) => {
+const Table = ({ variant = 'default', columns = [], hiddenColumns = [], data = [], readOnly = false, onRowSelect = (rowData) => { }, defaultPageSize = 5, enableGlobalSearch = true, globalSearchPlaceholder = 'Search all columns...', globalSearchStyle = {}, enablePagination = true, pageSizeOptions = [5, 10, 20, 30, 40, 50], noDataFoundText = 'No data found', }) => {
     const [selectedRow, setSelectedRow] = useState();
     const [pagination, setPagination] = React__default.useState({
         pageIndex: 0,
@@ -24204,6 +24204,17 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
     const [globalFilter, setGlobalFilter] = React__default.useState('');
     const [columnFilters, setColumnFilters] = React__default.useState([]);
     const [filterState, setFilterState] = useState({});
+    const initialVisibility = useMemo$1(() => {
+        const visibility = {};
+        columns.forEach((col) => {
+            const key = col.accessorKey;
+            if (key) {
+                visibility[key] = !hiddenColumns.includes(key);
+            }
+        });
+        return visibility;
+    }, [columns, hiddenColumns]);
+    const [columnVisibility, setColumnVisibility] = React__default.useState(initialVisibility);
     const table = useReactTable({
         data,
         columns,
@@ -24221,7 +24232,9 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
             pagination,
             globalFilter,
             columnFilters,
+            columnVisibility,
         },
+        onColumnVisibilityChange: setColumnVisibility,
     });
     const onRowClick = (row) => {
         if (!readOnly) {
@@ -24250,7 +24263,7 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
                             ? Array.from(selected.values()).map((selection) => selection.value)
                             : selected?.value ?? '';
                         header.column?.setFilterValue(newFilter.toString());
-                    }, options: header.column.columnDef?.meta?.filterOptions || [], isMulti: header.column.columnDef?.meta?.multiSelect || false, placeholder: header.column.columnDef?.meta?.filterPlaceholder || 'Select...', isClearable: true })))))),
+                    }, options: header.column.columnDef?.meta?.filterOptions || [], isMulti: header.column.columnDef?.meta?.multiSelect || false, placeholder: header.column.columnDef?.meta?.filterPlaceholder || 'Select...', isClearable: true, defaultValue: header.column.columnDef?.meta?.defaultValue || null })))))),
         React__default.createElement(StyledTable, { variant: variant, readOnly: readOnly },
             React__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React__default.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React__default.createElement("th", { key: header.id },
                 React__default.createElement("div", { className: header.column.getCanSort() ? 'sortable' : '',