rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-28 13:59:49 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

small code quality changes

Browse Source
This commit is contained in:
Nick A 2025-04-18 15:54:06 -04:00
parent ee4bea60ac
commit 3750fcf66f
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
compass/components/Table/ColumnHeader.tsx
View File

@ -29,9 +29,7 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
); );
const isFiltered = const isFiltered =
column.getFilterValue() !== undefined && column.getFilterValue() != null && column.getFilterValue() !== "";
column.getFilterValue() !== null &&
column.getFilterValue() !== "";
const headerRef = useRef<HTMLTableCellElement>(null); const headerRef = useRef<HTMLTableCellElement>(null);
const menuRef = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null);
@ -92,12 +90,16 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
header.getContext() header.getContext()
)} )}
{/* Choose the icon based on sort direction */} {/* Choose the icon based on sort direction */}
{{ {
asc: <ArrowUpIcon className="w-3 h-3 ml-1" />, {
asc: (
<ArrowUpIcon className="w-3 h-3 ml-1" />
),
desc: ( desc: (
<ArrowDownIcon className="w-3 h-3 ml-1" /> <ArrowDownIcon className="w-3 h-3 ml-1" />
), ),
}[column.getIsSorted() as string] ?? null} }[column.getIsSorted() as "asc" | "desc"]
}
</div> </div>
</div> </div>
)} )}
@ -137,26 +139,23 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
</button> </button>
<hr className="w-40" /> <hr className="w-40" />
<button <button
className="flex items-center w-full text-left px-4 py-2 text-xs hover:bg-gray-100" className={`flex items-center w-full text-left px-4 py-2 text-xs hover:bg-gray-100 ${
isFiltered ? "text-red-400" : ""
}`}
onClick={() => { onClick={() => {
column.getCanFilter() && column.getCanFilter() &&
column.setFilterValue(""); column.setFilterValue("");
setDropdownType(isFiltered ? null : "filter"); setDropdownType(isFiltered ? null : "filter");
}} }}
> >
<FunnelIcon className="w-4 h-4 mr-2" />
{isFiltered ? ( {isFiltered ? (
<> <>
<FunnelIcon className="`w-4 h-4 mr-2 text-red-400" /> <span>Clear Filter</span>
<span className="text-red-400"> <XMarkIcon className="w-4 h-4 ml-auto" />
Clear Filter
</span>
<XMarkIcon className="w-4 h-4 ml-auto text-red-400" />
</> </>
) : ( ) : (
<>
<FunnelIcon className="w-4 h-4 mr-2" />
<span>Add Filter</span> <span>Add Filter</span>
</>
)} )}
</button> </button>
</div> </div>
@ -177,7 +176,7 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
onChange={(e) => { onChange={(e) => {
column.setFilterValue(e.target.value); column.setFilterValue(e.target.value);
}} }}
placeholder="Filter..." placeholder="Type a value…"
className="border border-gray-300 rounded p-1" className="border border-gray-300 rounded p-1"
/> />
</div> </div>