@shopify/polaris/build/esnext/components/DataTable/DataTable.css

Shopify’s admin product component library

.Polaris-DataTable_1pikz { position: relative; max-width: 100vw; }

.Polaris-DataTable--condensed_b60cb .Polaris-DataTable__Navigation_1ajsq { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 0.5rem; }

@media (min-width: 48em) { .Polaris-DataTable--condensed_b60cb .Polaris-DataTable__Navigation_1ajsq { justify-content: flex-end; } }

.Polaris-DataTable__Navigation_1ajsq { display: none; }

.Polaris-DataTable__Pip_375sr { height: 0.375rem; width: 0.375rem; background: var(--p-text-subdued); border-radius: var(--p-border-radius-base); }

.Polaris-DataTable__Pip_375sr:not(:last-of-type) { margin-right: 0.25rem; }

.Polaris-DataTable__Pip--visible_1sajm { background: var(--p-text); }

.Polaris-DataTable__ScrollContainer_lf5n1 { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.Polaris-DataTable__Table_2qj3m { width: 100%; border-spacing: 0; }

@media (min-width: 48em) { .Polaris-DataTable--hoverable_1q7x3:hover .Polaris-DataTable__Cell_yixs7 { background: var(--p-surface-hovered); } }

.Polaris-DataTable__TableRow_1a85o + .Polaris-DataTable__TableRow_1a85o .Polaris-DataTable__Cell_yixs7 { border-top: 0.0625rem solid var(--p-divider); }

.Polaris-DataTable__Cell_yixs7 { padding: 1rem; white-space: nowrap; text-align: left; transition: background-color 0.2s ease-in-out; }

.Polaris-DataTable__Cell--firstColumn_2o4gk { font-weight: 400; color: var(--p-text); text-align: left; white-space: normal; }

.Polaris-DataTable__Cell--numeric_1ld9f { text-align: right; }

.Polaris-DataTable__Cell--truncated_1chsk { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; max-width: 9.0625rem; }

.Polaris-DataTable__Cell--header_sv8he { font-weight: 400; color: var(--p-text); border-bottom: 0.0625rem solid var(--p-divider); border-top: 0; }

.Polaris-DataTable__Cell--sortable_yf7r1 { padding: 0; }

.Polaris-DataTable__Cell--verticalAlignTop_1042b { vertical-align: top; }

.Polaris-DataTable__Cell--verticalAlignBottom_1dkyy { vertical-align: bottom; }

.Polaris-DataTable__Cell--verticalAlignMiddle_mmoue { vertical-align: middle; }

.Polaris-DataTable__Cell--verticalAlignBaseline_sl0em { vertical-align: baseline; }

.Polaris-DataTable__Icon_yj27d { display: flex; align-self: flex-end; opacity: 0; transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1), fill 200ms cubic-bezier(0.25, 0.1, 0.25, 1); }

.Polaris-DataTable__Heading_1brcv { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; position: relative; position: relative; display: inline-flex; justify-content: flex-end; align-items: baseline; color: var(--p-text); transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1); cursor: pointer; padding: 0.5rem; margin: 0.5rem; }

.Polaris-DataTable__Heading_1brcv:focus { outline: none; }

.Polaris-DataTable__Heading_1brcv::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.0625rem); }

.Polaris-DataTable__Heading_1brcv svg { fill: var(--p-icon); }

.Polaris-DataTable__Heading_1brcv:hover { color: var(--p-interactive-hovered); }

.Polaris-DataTable__Heading_1brcv:hover svg { fill: var(--p-interactive-hovered); }

.Polaris-DataTable__Heading_1brcv:hover .Polaris-DataTable__Icon_yj27d { opacity: 1; }

.Polaris-DataTable__Heading_1brcv:focus:not(:active)::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: 0.0625rem solid transparent; }

.Polaris-DataTable__Heading--left_au11s { justify-content: flex-start; flex-direction: row-reverse; }

.Polaris-DataTable__Cell--sorted_ea2kb .Polaris-DataTable__Icon_yj27d { opacity: 1; }

.Polaris-DataTable__Cell--total_99xdh { font-weight: 600; background: var(--p-surface-subdued); border-bottom: 0.0625rem solid var(--p-divider); }

.Polaris-DataTable--cellTotalFooter_1fqr9 { border-top: 0.0625rem solid var(--p-divider); border-bottom: none; border-bottom-left-radius: var(--p-border-radius-base); border-bottom-right-radius: var(--p-border-radius-base); }

.Polaris-DataTable__Footer_z4ij5 { padding: 1rem; background: var(--p-surface-subdued); color: var(--p-text-subdued); text-align: center; border-top: 0.0625rem solid var(--p-divider); border-bottom-left-radius: var(--p-border-radius-base); border-bottom-right-radius: var(--p-border-radius-base); }