T
TanStack•11mo ago
adverse-sapphire

Dynamically hide columns based on width/resize

Hello, i have set columns. and i want to add responsiveness. how i want it to work is to hide the last column visible as the screen gets smaller, which would result in a table with 2-3 columns by the time it reaches mobile. is there any automatic way for me to do this? example if the table starts to have a scrollbar, remove/hide last visible column
1 Reply
conscious-sapphire
conscious-sapphire•9mo ago
I would create a hook first: 
import {useState, useEffect} from "react";

export const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState<
    "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ""
  >("");

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setScreenSize("xs");
      } else if (window.innerWidth >= 640 && window.innerWidth < 768) {
        setScreenSize("sm");
      } else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
        setScreenSize("md");
      } else if (window.innerWidth >= 1024 && window.innerWidth < 1280) {
        setScreenSize("lg");
      } else if (window.innerWidth >= 1280 && window.innerWidth < 1536) {
        setScreenSize("xl");
      } else if (window.innerWidth >= 1536) {
        setScreenSize("2xl");
      }
    };

    window.addEventListener("resize", handleResize);
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, []);

}
import {useState, useEffect} from "react";

export const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState<
    "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ""
  >("");

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setScreenSize("xs");
      } else if (window.innerWidth >= 640 && window.innerWidth < 768) {
        setScreenSize("sm");
      } else if (window.innerWidth >= 768 && window.innerWidth < 1024) {
        setScreenSize("md");
      } else if (window.innerWidth >= 1024 && window.innerWidth < 1280) {
        setScreenSize("lg");
      } else if (window.innerWidth >= 1280 && window.innerWidth < 1536) {
        setScreenSize("xl");
      } else if (window.innerWidth >= 1536) {
        setScreenSize("2xl");
      }
    };

    window.addEventListener("resize", handleResize);
    handleResize();

    return () => window.removeEventListener("resize", handleResize);
  }, []);

}
Then use it in any react component ike this: 
const screenSize = useScreenSize();
let visibilityState = {
  colName: false,
 }
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(visibilityState)
const table = useReactTable({
  ...
  ...
  state: {
    columnVisibility
  }
}

useEffect(() => {
  if screenSize == 'xs' {
    setColumnVisibility({ ... })
  } else if screenSize == 'lg' { ... }
  ...
}, [screenSize]);
const screenSize = useScreenSize();
let visibilityState = {
  colName: false,
 }
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(visibilityState)
const table = useReactTable({
  ...
  ...
  state: {
    columnVisibility
  }
}

useEffect(() => {
  if screenSize == 'xs' {
    setColumnVisibility({ ... })
  } else if screenSize == 'lg' { ... }
  ...
}, [screenSize]);

Did you find this page helpful?