@browser.style/data-grid/index.css

Dynamic data grid component with sorting, filtering, and pagination support

@import "../icon/index.css";
@layer bs-component {
	:where(data-grid) {
		container-type: inline-size;
		display: grid;
		position: relative;

		[hidden] { display: none !important; }


		/* === PARTS === */

		[part~=group] {
			align-items: center;
			display: flex;
			gap: .75ch;
		}


		& > div {
			overflow-x: auto;
		}
		
		& fieldset {
			all: unset;
			/* align-items: center;
			display: flex;
			gap: .75ch; */

			& button, & .ui-button {
				--button-p: 0;
				--icon-sz: 24px;
				--icon-sw: 1.5;
				font-size: small;
				&:is([name=csv], [name=json]) {
					--button-p: 0 1ch;
				}
			}

			& [type=number] {
				all: unset;
				&::-webkit-inner-spin-button { display: none; }
				&[size="1"] { width: 1ch; }
				&[size="2"] { width: 2ch; }
				&[size="3"] { width: 3ch; }
				&[size="4"] { width: 4ch; }
			}

			& label:not(.ui-button) { all: unset; line-height: 1; }
			& label.ui-button {
				grid-template-columns: 1fr;
				&:has(:checked) {
					background-color: var(--ButtonText);
					color: var(--Canvas)
				}
			}

			& label:has([name="searchmethod"]) {
				margin-inline-end: auto;
			}

			& select {
				background-position: calc(100% - .125ch) center;
				block-size: unset;
				font-family: inherit;
				font-size: inherit;
				padding: .125ch 2ch .125ch .5ch;
			}

			& small { line-height: 1; }

			&[name=navigation] {
				gap: 3ch;
				justify-self: end;
				label:has(select) {
					align-items: center;
					display: flex;
					gap: .75ch;
					text-wrap: nowrap;
				}
			}

			&[name="search"] {
				align-items: end;
				justify-content: space-between;
				margin-block: 0 1ch;
				& select {
					border: 0;
					color: var(--GrayText);
					font-size: small;
					line-height: 1;
				}
			}

			& [name="searchterm"] {
				--icon: url(./assets/svg/filter.svg);
				block-size: auto;
				font-family: inherit;
				padding: .66ch 1.2ch;
				&:focus-visible { --icon: none; }
			}

			label:has([name="textwrap"]) {
				margin-inline-end: 1ch;
			}
		}

		fieldset[name=columnfilter],
		fieldset[name=allsettings] {
			background: Canvas;
			border-radius: .25em;
			box-shadow: 0px 25px 50px -12px color-mix(in srgb, CanvasText 25%, transparent);
			display: grid;
			font-size: 14px;
			column-gap: 1ch;
			inset-block: anchor(bottom) auto;
			inset-inline: auto anchor(right);
			padding: 2ch;
			position-anchor: var(--_pa);
    	position-try-fallbacks: flip-block;
			row-gap: 1.5ch;
			&:not(:popover-open) { display: none; }
			label:not(:has(select)) {
				display: grid;
				grid-template-columns: min-content 1fr;
				gap: 1ch;
				text-align: start;
			}
		}
		fieldset[name=allsettings] {
			inset-inline: anchor(left) auto;
		}

		& form {
			align-items: center;
			display: grid;
			font-size: small;
			grid-auto-flow: column;
			margin-block: 1ch;
			& * { font-size: inherit; }
		}

		& table {
			width: 100%;
			& label { display: contents; }
			& td {
				cursor: default;
				position: relative;

				/* Editable */
				&[contenteditable]:is(:focus,:focus-visible) {
					background: Canvas;
					color: CanvasText;
					outline: 2px solid var(--AccentColor);
					outline-offset: -2px;
				}
			}

			& th {
				cursor: pointer;
				/* Sort indicators */
				&[tabindex] span {
					align-items: center;
					display: flex;
					gap: .5ch;
					pointer-events: none;
					white-space: nowrap;
					&::after {
						background-image: linear-gradient(var(--_deg, 180deg), var(--_index, var(--ButtonBorder)) 0 50%, var(--ButtonBorder) 50%);
						clip-path: polygon(100% 40%, 50% 0%, 0% 40%, 100% 40%, 100% 60%, 0% 60%, 50% 100%, 100% 60%);
						content: "";
						display: inline-block;
						margin-inline-start: auto;
						width: .7em;
						height: 1em;
					}
				}
				.--nosortable & {
					span::after { display: none; }
				}
			}

			/* Selectable */
			& :is(td, th):has([type=checkbox]) {
				padding-block-end: 0;
				pointer-events: none;
				text-align: center;
				vertical-align: middle;
				& input {
					font-size: 1rem;
					pointer-events: all;
				}
			}

			& tr[aria-selected] td {
				--ui-table-td-hover: var(--AccentColor);
				--ui-table-td-bg: var(--Highlight);
			}




			/* Printable */
			@media print {
				& :is(td, th) {
					background: none !important;
					border: 0;
					font-family: 'Arial', 'Helvetica', sans-serif;
					font-size: 10pt;
					& > * {
						background: inherit;
						&::after { content: none !important; }
					}
					&:has([type=checkbox]) { display: none; }
				}
			}
		}




		/* RWD */
		@container (max-width: 600px) {
			& [name=actions] {
				order: 2;
			}
			& fieldset[name=navigation] {
				justify-content: space-between;
				justify-self: unset;
				& small { display: none; }
			}
			& form { gap: 1ch; grid-auto-flow: row; }
		}

		/* Column Alignment */
		.--center {
			text-align: center;
		}
		.--end {
			text-align: end;
			span {
				justify-content: end;
			}
		}

		/* Sort */
		&[sortorder="1"] { --_deg: 0deg; }
		&[sortindex="0"] [data-sort-index="0"],
		&[sortindex="1"] [data-sort-index="1"],
		&[sortindex="2"] [data-sort-index="2"],
		&[sortindex="3"] [data-sort-index="3"],
		&[sortindex="4"] [data-sort-index="4"],
		&[sortindex="5"] [data-sort-index="5"],
		&[sortindex="6"] [data-sort-index="6"],
		&[sortindex="7"] [data-sort-index="7"],
		&[sortindex="8"] [data-sort-index="8"] { --_index: currentColor; }

		/* Right-to-left */
		[dir=rtl] & {
			& [name=navigation] svg {
				scale: -1 1;
			}
			& select {
				background-position: .125ch center;
				padding: .125ch .5ch .125ch 2ch;
			}
		}
	}

	@media print {
		.pe-no-print {
				display: none !important;
		}
		.pe-preserve-ancestor {
				display: block !important;
				margin: 0 !important;
				padding: 0 !important;
				border: none !important;
				box-shadow: none !important;
		}
	}
	@keyframes l3 {to{transform: rotate(1turn)}}
}