Блог

Как я могу добавить столбец данных в таблицу materialui в reactjs. Например, у меня есть 100 филиалов для моего бизнеса, я хочу, чтобы заголовок таблицы содержал название филиала, и этот столбец должен содержать имена сотрудников. Таким образом, должно быть 100 заголовков таблицы. Array=[{branchname: ‘String’, employees[]}]

Чао, хорошо, вам нужно немного поработать со своей структурой данных, потому что Materual UI Table принимает данные, организованные по строкам, а не по столбцам, как вам нужно.

Допустим, у вас есть такие данные, как:

 const branchEmployees = [
  { branchname: "branch1", employees: ["e1", "e2", "e3"] },
  { branchname: "branch2", employees: ["e4", "e5", "e6"] },
  { branchname: "branch3", employees: ["e7", "e8", "e9"] },
  { branchname: "branch4", employees: ["e10", "e11", "e12"] },
  { branchname: "branch5", employees: ["e13", "e14", "e15"] }
];
  

Итак, сначала создайте массив со всеми именами ветвей. Что-то вроде:

 let bEmp = [];
branchEmployees.forEach((el) => {
   bEmp.push(el.branchname);
});
  

Затем мы должны вернуть данные сотрудников таким образом:

От:

    employees: ["e1", "e2", "e3"]
   employees: ["e4", "e5", "e6"]
   employees: ["e7", "e8", "e9"]
   employees: ["e10", "e11", "e12"]
   employees: ["e13", "e14", "e15"]
  

Для:

    employees: ["e1", "e4", "e7", "e10", "e13"]
   employees: ["e2", "e5", "e8", "e11", "e14"]
   employees: ["e3", "e6", "e9", "e12", "e15"]
  

Чтобы достичь этого, вы могли бы определить const, который представляет максимальное количество сотрудников в филиале, а затем создать вложенный for loop , чтобы выполнить вышеуказанное преобразование. Что-то вроде:

 const NUMBER_OF_EMPLOYEES_PER_BRANCH = 3; // this is the max number of employees per branch
let arrLp = [];
for (let j = 0; j < NUMBER_OF_EMPLOYEES_PER_BRANCH; j  ) {
   let arrayLookup = [];
   for (let i = 0; i < branchEmployees.length; i  ) {
      arrayLookup.push(branchEmployees[i].employees[j]);
   }
   arrLp.push(arrayLookup);
}
  

Итак, теперь у вас есть, bEmp который содержит все названия филиалов и arrLp который содержит всех сотрудников в строке.

Теперь просто необходимо создать 2 переменные состояния, чтобы сохранить эти значения и использовать их в Table компоненте.

Вот пример codesandbox.

Примечание: это решение работает также, если у вас разное количество сотрудников в филиале. Просто необходимо установить NUMBER_OF_EMPLOYEES_PER_BRANCH максимальное количество сотрудников, которое может иметь филиал 🙂