CODEWITHSUNDEEP
javascriptcssextjs
Eugienia Bornouskaya
Eugienia Bornouskaya

Reputation: 21

How to implement vertical column in a grid? ExtJS 6

I need to implement in a grid without using data:[ ], so it has the same parameters as the horizontal header in the table (text, static, sortable, fixed, etc.).

enter image description here

There is a Pivot package, which provides such an opportunity, but unfortunately, I can't use it.

Is there an alternative way to create a vertical column in a grid?

P.S.: Treelist is also not an option.

Upvotes: 2

Views: 285

Answers (1)

Krishnaraj
Krishnaraj

Reputation: 541

I hope this will help you! (it is an independant solution, not a part of extJs)

<html>
<head>
<style>
body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  grid-auto-flow: row dense;
}

.column1 {
  grid-column-start: 1;
  background-color: #f3f3f3;
  padding: 2px;
}

.column2 {
  grid-column-start: 2;
  background-color: #ccc;
  padding: 2px;
}
.column3 {
  grid-column-start: 3;
  background-color: #ccc;
  padding: 2px;
}
</style>
</head>
<body>
<span class="column1">1</span>
<span class="column1">2</span>
<span class="column1">3</span>
<span class="column1">4</span>
<span class="column2">5</span>
<span class="column2">6</span>
<span class="column2">7</span>
<span class="column3">8</span>
<span class="column3">9</span>
<span class="column3">10</span>
</body>
</html>

Upvotes: 1

Related Questions