diff --git a/docs/stories/aIntro.stories.tsx b/docs/stories/aIntro.stories.tsx index e2e97c5..e174acf 100644 --- a/docs/stories/aIntro.stories.tsx +++ b/docs/stories/aIntro.stories.tsx @@ -15,7 +15,7 @@ export default { table: { disable: true }, }, fullWidth: { - defaultValue: true, + defaultValue: 'left', options: [true, false, 'left', 'right'], control: { type: 'inline-radio' }, }, @@ -31,7 +31,7 @@ export const Primary = { virtual: true, enableExport: true, stickyHeader: true, - fullWidth: true, + fullWidth: 'left', }, }; diff --git a/src/components/columnSelection.tsx b/src/components/columnSelection.tsx index 6adc805..fc438e2 100644 --- a/src/components/columnSelection.tsx +++ b/src/components/columnSelection.tsx @@ -13,6 +13,8 @@ export function ColumnSelection(): JSX.Element { const Settings = useTheme((t) => t.icons.Settings); const selectColumns = useTheme((t) => t.text.selectColumns); const resetAll = useTheme((t) => t.text.resetAll); + const showAll = useTheme((t) => t.text.showAllColumns); + const hideAll = useTheme((t) => t.text.hideAllColumns); const classes = useTheme((t) => t.classes); const cssVariables = useCssVariables(); @@ -23,14 +25,20 @@ export function ColumnSelection(): JSX.Element { const [anchorElement, setAnchorElement] = useState(null); - const toggle = (column: InternalColumn) => { + const toggle = (column?: InternalColumn, state?: boolean) => { const { props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange }, } = table.getState(); const newValue = new Set(hiddenColumns); - if (hiddenColumns.has(column.id)) newValue.delete(column.id); - else newValue.add(column.id); + + for (const columnId of column ? [column.id] : columns.map((column) => column.id)) { + if (state ?? hiddenColumns.has(columnId)) { + newValue.delete(columnId); + } else { + newValue.add(columnId); + } + } if (!controlledHiddenColumns) { table.update((state) => { @@ -41,6 +49,8 @@ export function ColumnSelection(): JSX.Element { onHiddenColumnsChange?.(newValue); }; + const allVisible = columns.every((column) => !hiddenColumns.has(column.id)); + return ( <> setAnchorElement(anchorElement ? null : event.currentTarget)}> @@ -58,6 +68,16 @@ export function ColumnSelection(): JSX.Element {
{selectColumns}
+
+ + + +
+ {columns.map((column) => ( (): JSX.Element { label={column.header} > ))} - -
diff --git a/src/theme/defaultTheme/defaultTexts.tsx b/src/theme/defaultTheme/defaultTexts.tsx index f8b8759..b27f5ff 100644 --- a/src/theme/defaultTheme/defaultTexts.tsx +++ b/src/theme/defaultTheme/defaultTexts.tsx @@ -2,6 +2,8 @@ import type { TableTheme } from '../../types'; export const defaultTexts: TableTheme['text'] = { selectColumns: 'Select visible columns', + showAllColumns: 'Show all', + hideAllColumns: 'Hide all', noResults: 'No results', exportTitle: 'Export', exportCopy: 'To clipboard', diff --git a/src/types.ts b/src/types.ts index 56b7b54..c4712fa 100644 --- a/src/types.ts +++ b/src/types.ts @@ -21,6 +21,8 @@ export interface TableTheme { /** Define display texts. */ text: { selectColumns: ReactNode; + showAllColumns: ReactNode; + hideAllColumns: ReactNode; noResults: ReactNode; exportTitle: ReactNode; exportCopy: ReactNode;