Как изменить класс строки на основе значений ячеек в griddle-реагировать? - PullRequest
Новая
       8

Как изменить класс строки на основе значений ячеек в griddle-реагировать?

0 голосов
/ 14 сентября 2018

У меня есть таблица в griddle (v 1.13.1), и я хочу выделить несколько строк. 

var data = [{highlight:true, name:"Abc"},
            {highlight:false, name:"Abc"},
            {highlight:true, name:"Abc"}]

<Griddle 
   data={data} />

Я хочу добавить класс ко всем строкам, которые имеют highlight == true.Как я могу это сделать?

1 Ответ

0 голосов
/ 14 сентября 2018

Если вы посмотрите на исходный код реализации компонента <Row>, вы можете определить свой собственный. Компонент принимает components реквизиты, и вы можете добавить туда свою собственную логику, как я делал в демонстрации ниже. 

var data = [
  { highlight: true, name: "Abc" },
  { highlight: false, name: "Abc" },
  { highlight: true, name: "Abc" }
];

const TableRow = ({
  Cell,
  griddleKey,
  columnIds,
  onClick,
  onMouseEnter,
  onMouseLeave,
  style,
  className,
  rowData
}) => {
  const appliedClassName = rowData.highlight
    ? `${className} my-own-class`
    : className;
  return (
    <tr
      key={griddleKey}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={style}
      className={appliedClassName}
    >
      {columnIds &&
        columnIds.map(c => (
          <Cell
            key={`${c}-${griddleKey}`}
            griddleKey={griddleKey}
            columnId={c}
            style={style}
            className={className}
          />
        ))}
    </tr>
  );
};

function App() {
  return (
    <div className="App">
      <Griddle
        components={{
          Row: props => <TableRow {...props} />
        }}
        data={data}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/griddle-react/0.8.2/Griddle.min.js"></script>

<div id="root"></div>

Примечание. По какой-то причине этот код не работает в редакторе SO.

...