ag-grid-react-components
Version:
Give your users the date filtering they deserve. Relative date queries, quick filters, and shareable views for AG Grid.
162 lines (142 loc) • 3.65 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 1200px;
height: 630px;
font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
system-ui,
sans-serif;
background: linear-gradient(
135deg,
#1e1b4b 0%,
#0f172a 50%,
#312e81 100%
);
color: white;
position: relative;
overflow: hidden;
}
.grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(30, 41, 59, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 41, 59, 0.3) 1px, transparent 1px);
background-size: 40px 40px;
}
.content {
position: relative;
padding: 80px 100px;
height: 100%;
display: flex;
flex-direction: column;
}
.title {
font-size: 64px;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.subtitle {
font-size: 32px;
color: #94a3b8;
margin-bottom: 40px;
}
.pills {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.pill {
padding: 12px 30px;
border-radius: 25px;
font-size: 20px;
white-space: nowrap;
}
.pill-blue {
background: rgba(79, 70, 229, 0.2);
color: #818cf8;
}
.pill-green {
background: rgba(16, 185, 129, 0.2);
color: #34d399;
}
.pill-yellow {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
.code-block {
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
padding: 20px;
font-family: "Fira Code", monospace;
font-size: 18px;
line-height: 1.6;
max-width: 800px;
backdrop-filter: blur(10px);
}
.code-comment {
color: #60a5fa;
}
.code-text {
color: #e5e7eb;
}
.badge {
position: absolute;
bottom: 80px;
right: 100px;
background: rgba(16, 185, 129, 0.2);
padding: 20px 30px;
border-radius: 8px;
text-align: center;
}
.badge-label {
font-size: 16px;
color: #34d399;
}
.badge-value {
font-size: 28px;
font-weight: bold;
color: #34d399;
}
</style>
</head>
<body>
<div class="grid-pattern"></div>
<div class="content">
<h1 class="title">AG Grid React Components</h1>
<p class="subtitle">Give your users the date filtering they deserve</p>
<div class="pills">
<span class="pill pill-blue">Relative Dates</span>
<span class="pill pill-green">Quick Filters</span>
<span class="pill pill-yellow">URL Persistence</span>
</div>
<div class="code-block">
<div class="code-comment">
// Enable relative date queries like "Today-7d"
</div>
<div class="code-text">const DateFilter = createDateFilter();</div>
<div class="code-text">filterParams: { defaultMode: 'relative' }</div>
<div class="code-comment">// "Last 30 days" stays last 30 days</div>
</div>
</div>
<div class="badge">
<div class="badge-label">Starting at</div>
<div class="badge-value">25KB</div>
</div>
</body>
</html>