Добавьте S.N (серийный номер)/дополнительный столбец в React-Tables V7.

В. Для кого предназначена эта статья?

• Для тех, кто использовал React-Tables и застрял при добавлении S.N или дополнительного столбца в React-Tables.

Здесь,

const fields = ['s.n', 'title', 'url', 'state'];

If columns are fetched from backend/api и вы хотите добавить столбец "S.N", тогда

const columnFields = ['s.n'];
columnFields.push(...fields);

Это поместит elements массива fields в массив columnFields таким образом, что:

const columnFields = ['s.n', 'title', 'url', 'state'];

Затем, вставив значения ячеек s.n:

const optimizedColumns = columnFields.map((col) => {
        if (col === "s.n") {
            return {
                Header: CapitalizeFirstLetter(col),
                accessor: col,
                /* cell values of s.n column using row.index prop 
                  of react-tables and +1 because index value start 
                 with 0 */
                Cell: (prop) => prop.row.index+1,
            };
        } 
       else {
            return {
                Header: CapitalizeFirstLetter(col),
                accessor: col,
            };
        }
    });

Предполагая, что у вас есть данные таблицы в массиве projects

//tabledata
const data = React.useMemo(() => projects, []);

//tablecolumn
const columns = React.useMemo(() => optimizedColumns, []);

Полезные ссылки: Пример React-Tables

Если вам понравился этот пост, оставьте отзыв/комментарий.

Подробнее читайте в BlazeCodes.com