diff --git a/src/components/ResultsView.tsx b/src/components/ResultsView.tsx
index 098f6d0..34e8834 100644
--- a/src/components/ResultsView.tsx
+++ b/src/components/ResultsView.tsx
@@ -314,8 +314,13 @@ const ResultsView: ResultsViewComponent = ({
const [columnFilters, setColumnFilters] = useState(settings.columnFilters);
const [searchFilter, setSearchFilter] = useState(settings.searchFilter);
const [showInterface, setShowInterface] = useState(settings.showInterface);
+ const [hiddenColumns, setHiddenColumns] = useState(settings.hiddenColumns);
const [showMenuIcons, setShowMenuIcons] = useState(false);
+ const visibleColumns = useMemo(() => {
+ return columns.filter(column => !hiddenColumns.includes(column.key));
+ }, [columns, hiddenColumns]);
+
const { allProcessedResults, paginatedResults } = useMemo(() => {
return postProcessResults(results, {
activeSort,
@@ -360,6 +365,7 @@ const ResultsView: ResultsViewComponent = ({
const [isEditColumnSort, setIsEditColumnSort] = useState(false);
const [isEditColumnFilter, setIsEditColumnFilter] = useState(false);
const [isEditSearchFilter, setIsEditSearchFilter] = useState(false);
+ const [isEditHiddenColumns, setIsEditHiddenColumns] = useState(false);
const [layout, setLayout] = useState(settings.layout);
const layoutMode = useMemo(
@@ -371,8 +377,9 @@ const ResultsView: ResultsViewComponent = ({
searchFilter ||
columnFilters.length ||
random.count ||
+ hiddenColumns.length ||
(activeSort.length && layout.mode !== "table"), // indicator is on ResultHeader
- [searchFilter, columnFilters, random, activeSort, layout.mode]
+ [searchFilter, columnFilters, random, activeSort, layout.mode, hiddenColumns]
);
const onViewChange = (view: (typeof views)[number], i: number) => {
const newViews = views.map((v, j) => (i === j ? view : v));
@@ -405,6 +412,23 @@ const ResultsView: ResultsViewComponent = ({
(view) => VIEWS[view.mode]?.value === true
);
+ const onHiddenColumnsChange = (newHiddenColumns: string[]) => {
+ setHiddenColumns(newHiddenColumns);
+ if (preventSavingSettings) return;
+ const hiddenColumnsNode = getSubTree({
+ key: "hiddenColumns",
+ parentUid: settings.resultNodeUid,
+ });
+ hiddenColumnsNode.children.forEach((c) => deleteBlock(c.uid));
+ newHiddenColumns.forEach((columnKey, order) =>
+ createBlock({
+ parentUid: hiddenColumnsNode.uid,
+ node: { text: columnKey },
+ order,
+ })
+ );
+ };
+
return (
{
const options =
s.options === "columns"
- ? columns.map((c) => c.key)
+ ? visibleColumns.map((c) => c.key)
: s.options.slice();
return (
))}
c.key)
.filter((c) => !activeSort.some((as) => as.key === c))}
transformItem={(k) =>
@@ -663,7 +688,7 @@ const ResultsView: ResultsViewComponent = ({
ButtonProps={{
text: "Choose Column",
intent: "primary",
- disabled: columns.length === activeSort.length,
+ disabled: visibleColumns.length === activeSort.length,
}}
onItemSelect={(column) => {
resultViewSetActiveSort([
@@ -689,7 +714,7 @@ const ResultsView: ResultsViewComponent = ({
c.key)}
+ items={visibleColumns.map((c) => c.key)}
transformItem={(k) =>
k.length > 10 ? `${k.slice(0, 7)}...` : k
}
@@ -825,7 +850,7 @@ const ResultsView: ResultsViewComponent = ({
intent="primary"
onClick={() => {
const newFilter = {
- key: columns[0].key,
+ key: visibleColumns[0].key,
type: SUPPORTED_COLUMN_FILTER_TYPES[0].id,
value: [""],
uid: window.roamAlphaAPI.util.generateUID(),
@@ -884,7 +909,7 @@ const ResultsView: ResultsViewComponent = ({
- {views.map(({ column, mode, value }, i) => (
+ {views.filter(({ column }) => visibleColumns.some(c => c.key === column)).map(({ column, mode, value }, i) => (
| {column} |
@@ -942,6 +967,31 @@ const ResultsView: ResultsViewComponent = ({
|
+ ) : isEditHiddenColumns ? (
+
+
setIsEditHiddenColumns(false)}
+ text="Hide Columns"
+ />
+
+ {columns.map(({ key }) => (
+
+ {key}
+ {
+ const isVisible = (e.target as HTMLInputElement).checked;
+ if (isVisible) {
+ onHiddenColumnsChange(hiddenColumns.filter(col => col !== key));
+ } else {
+ onHiddenColumnsChange([...hiddenColumns, key]);
+ }
+ }}
+ />
+
+ ))}
+
+
) : (